在vue中,computed表示“計(jì)算屬性”,是根據(jù)依賴關(guān)系進(jìn)行緩存的計(jì)算,只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)進(jìn)行更新。computed的每一個(gè)計(jì)算屬性都會(huì)被緩存起來,只要計(jì)算屬性所依賴的屬性發(fā)生變化,計(jì)算屬性就會(huì)重新執(zhí)行,視圖也會(huì)更新。computed計(jì)算屬性的結(jié)果會(huì)被緩存,除非依賴的響應(yīng)式 property 變化才會(huì)重新計(jì)算。
本教程操作環(huán)境:windows7系統(tǒng)、vue3版,DELL G3電腦。
computed定義
computed是vue的計(jì)算屬性,是根據(jù)依賴關(guān)系進(jìn)行緩存的計(jì)算,只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)進(jìn)行更新
computed用法
一般情況下,computed默認(rèn)使用的是getter屬性
computed的響應(yīng)式依賴(緩存)
1. computed的每一個(gè)計(jì)算屬性都會(huì)被緩存起來,只要計(jì)算屬性所依賴的屬性發(fā)生變化,計(jì)算屬性就會(huì)重新執(zhí)行,視圖也會(huì)更新。下面代碼中,計(jì)算屬性fullName,它依賴了firstName和lastName這兩個(gè)屬性,只要它們其中一個(gè)屬性變化,fullName就會(huì)重新執(zhí)行。
2.computed計(jì)算屬性會(huì)被緩存,在下面代碼中使用了兩次fullName,但在控制臺(tái)只輸出了一次 “這是fullName”。
<template> <div> <div> 姓:<input type="text" v-model="firstName" /> </div> <div> 名:<input type="text" v-model="lastName" /> </div> <!-- 調(diào)用兩次fullName --> <div>姓名:{{ fullName }}</div> <div>姓名:{{ fullName }}</div> </div> </template> <script> export default { data() { return { firstName: "張", lastName: "三", }; }, computed: { fullName() { console.log("這是fullName"); return this.firstName + this.lastName; } } }; </script>
computed 的工作原理
要理解 computed 的工作原理,只需要理解下面三個(gè)問題
1、computed 也是響應(yīng)式的
2、computed 如何控制緩存
3、依賴的 data 改變了,computed 如何更新
白話原理:
computed的響應(yīng)性
不清楚什么是響應(yīng)式,什么是訂閱者watcher?可以先了解Vue響應(yīng)式原理。
簡單的說:
-
你給 computed 設(shè)置的 get 和 set 函數(shù),會(huì)與 Object.defineProperty 關(guān)聯(lián)起來。
-
所以 Vue 能監(jiān)聽捕捉到,讀取 computed 和 賦值 computed 的操作。
-
在讀取 computed 時(shí),會(huì)執(zhí)行設(shè)置的 get 函數(shù),但是并沒有這么簡單,因?yàn)檫€有一層緩存的操作。如果數(shù)據(jù)沒有被污染,不為臟數(shù)據(jù),那將直接從緩存中取值,而不會(huì)去執(zhí)行 get 函數(shù)。(什么是臟數(shù)據(jù),后文中將會(huì)說到)
-
賦值 computed 時(shí),會(huì)執(zhí)行所設(shè)置的 set 函數(shù)。這個(gè)就比較簡單,會(huì)直接把 set 賦值給 Object.defineProperty – set。
Computed 如何控制緩存
我們都知道,computed 是有緩存的,官方已經(jīng)說明。
計(jì)算屬性的結(jié)果會(huì)被緩存,除非依賴的響應(yīng)式 property 變化才會(huì)重新計(jì)算。注意,如果某個(gè)依賴 (比如非響應(yīng)式 property) 在該實(shí)例范疇之外,則計(jì)算屬性是 不會(huì) 被更新的。
我們?yōu)槭裁葱枰彺妫考僭O(shè)我們有一個(gè)性能開銷比較大的計(jì)算屬性 A,它需要遍歷一個(gè)巨大的數(shù)組并做大量的計(jì)算。然后我們可能有其他的計(jì)算屬性依賴于 A 。如果沒有緩存,我們將不可避免的多次執(zhí)行 A 的 get 函數(shù)。大量的計(jì)算將導(dǎo)致JS線程被占用,阻塞頁面的渲染。
那么在 Vue 中,computed 是如何判斷是否使用緩存的呢?
首先 computed 計(jì)算后,會(huì)把計(jì)算得到的值保存到一個(gè)變量(watcher.value)中。讀取 computed 并使用緩存時(shí),就直接返回這個(gè)變量。當(dāng) computed 更新時(shí),就會(huì)重新賦值更新這個(gè)變量。
TIP:computed 計(jì)算就是調(diào)用你設(shè)置的 get 函數(shù),然后得到返回值。
computed 控制緩存的重要一點(diǎn)是 【臟數(shù)據(jù)標(biāo)志位 dirty】 dirty 是 watcher 的一個(gè)屬性。
-
當(dāng) dirty 為 true 時(shí),讀取 computed 會(huì)執(zhí)行 get 函數(shù),重新計(jì)算。
-
當(dāng) dirty 為 false 時(shí),讀取 computed 會(huì)使用緩存。
緩存機(jī)制簡述
-
一開始每個(gè) computed 新建自己的 watcher時(shí),會(huì)設(shè)置 watcher.dirty = true,以便于 computed 被使用時(shí),會(huì)計(jì)算得到值
-
當(dāng)依賴的數(shù)據(jù)變化了,通知 computed 時(shí),會(huì)賦值 watcher.dirty = true,此時(shí)重新讀取 computed 時(shí),會(huì)執(zhí)行 get 函數(shù)重新計(jì)算。
-
computed 計(jì)算完成之后,會(huì)設(shè)置 watcher.dirty = false,以便于其他地方再次讀取時(shí),使用緩存,免于計(jì)算。
依賴的data變化,computed如何更新?
簡述Vue響應(yīng)式原理
computed的本質(zhì)與data相似。當(dāng)被使用時(shí),會(huì)為其建立訂閱者watcher,交給依賴項(xiàng)收集。如:當(dāng) A 引用 B 的時(shí)候,B 會(huì)收集 A 的watcher。
場(chǎng)景設(shè)置
現(xiàn)在 頁面A 引用了 computed B,computed B 依賴了 data C。
像是這樣,A->B->C 的依賴順序。
那么,當(dāng) data C 變化,會(huì)發(fā)生什么呢?
會(huì)是這樣嗎?
-
通知 computed B 更新,然后 computed B 開始重新計(jì)算。
-
接著 computed B 通知 頁面A更新,然后重新讀取 computed。
一條鏈?zhǔn)降牟僮鳎?C -> B -> A 這樣的執(zhí)行順序嗎?
答案是否定的。
其實(shí)真正的流程是,data C 開始變化后…….
-
通知 computed B 的 watcher 更新,只會(huì)重置 臟數(shù)據(jù)標(biāo)志位 dirty =true,不會(huì)計(jì)算值。
-
通知 頁面 A watcher 進(jìn)行更新渲染,進(jìn)而重新讀取 computed B ,然后 computed B 開始重新計(jì)算。
為什么 data C 能通知 頁面 A?
data C 的依賴收集器會(huì)同時(shí)收集到 computed B 和 頁面 A 的 watcher。
為什么 data C 能收集到 頁面A 的watcher?
在 頁面 A 在讀取 computed B 的時(shí)候,趁機(jī)把 頁面A 的watcher塞給了 data C ,于是 頁面A watcher 和 data C 間接地關(guān)聯(lián)在了一起,于是 data C 就會(huì)收集到 頁面A watcher。
至于具體的代碼是怎么實(shí)現(xiàn)的,將會(huì)在下文源碼分析中講解。
所以computed 如何更新?
被依賴通知更新后,重置 臟數(shù)據(jù)標(biāo)志位 ,頁面讀取 computed 時(shí)再更新值。
白話總結(jié)
-
computed 通過 watcher.dirty 控制是否讀取緩存。
-
computed 會(huì)讓 【data依賴】 收集到 【依賴computed的watcher】,從而 data 變化時(shí),會(huì)同時(shí)通知 computed 和 依賴computed的地方。
【相關(guān)視頻教程推薦:vuejs入門教程、web前端入門】