詳解vue computed的緩存實(shí)現(xiàn)原理
本文圍繞下面這個例子,講解一下computed初始化及更新時的流程,來看看計(jì)算屬性是怎么實(shí)現(xiàn)的緩存,及依賴是怎么被收集的。
<div id='app'> <span @click='change'>{{sum}}</span></div><script src='http://m.4tl426be.cn/bcjs/vue2.6.js'></script><script> new Vue({ el: '#app', data() { return {count: 1, } }, methods: { change() {this.count = 2 }, }, computed: { sum() {return this.count + 1 }, }, })</script>初始化 computed
vue初始化時先執(zhí)行init方法,里面的initState會進(jìn)行計(jì)算屬性的初始化
if (opts.computed) {initComputed(vm, opts.computed);}
下面是initComputed的代碼
var watchers = vm._computedWatchers = Object.create(null); // 依次為每個 computed 屬性定義一個計(jì)算watcherfor (const key in computed) { const userDef = computed[key] watchers[key] = new Watcher( vm, // 實(shí)例 getter, // 用戶傳入的求值函數(shù) sum noop, // 回調(diào)函數(shù) 可以先忽視 { lazy: true } // 聲明 lazy 屬性 標(biāo)記 computed watcher ) // 用戶在調(diào)用 this.sum 的時候,會發(fā)生的事情 defineComputed(vm, key, userDef)}
每個計(jì)算屬性對應(yīng)的計(jì)算watcher的初始狀態(tài)如下:
{ deps: [], dirty: true, getter: ƒ sum(), lazy: true, value: undefined}
可以看到它的 value 剛開始是 undefined,lazy 是 true,說明它的值是惰性計(jì)算的,只有到真正在模板里去讀取它的值后才會計(jì)算。
這個 dirty 屬性其實(shí)是緩存的關(guān)鍵,先記住它。
接下來看看比較關(guān)鍵的 defineComputed,它決定了用戶在讀取 this.sum 這個計(jì)算屬性的值后會發(fā)生什么,繼續(xù)簡化,排除掉一些不影響流程的邏輯。
Object.defineProperty(target, key, { get() {// 從剛剛說過的組件實(shí)例上拿到 computed watcherconst watcher = this._computedWatchers && this._computedWatchers[key]if (watcher) { // 只有dirty了才會重新求值 if (watcher.dirty) { // 這里會求值,會調(diào)用get,會設(shè)置Dep.target watcher.evaluate() } // 這里也是個關(guān)鍵 等會細(xì)講 if (Dep.target) { watcher.depend() } // 最后返回計(jì)算出來的值 return watcher.value} }})
這個函數(shù)需要仔細(xì)看看,它做了好幾件事,我們以初始化的流程來講解它:
首先 dirty 這個概念代表臟數(shù)據(jù),說明這個數(shù)據(jù)需要重新調(diào)用用戶傳入的 sum 函數(shù)來求值了。我們暫且不管更新時候的邏輯,第一次在模板中讀取到 {{sum}} 的時候它一定是 true,所以初始化就會經(jīng)歷一次求值。
evaluate () { // 調(diào)用 get 函數(shù)求值 this.value = this.get() // 把 dirty 標(biāo)記為 false this.dirty = false}
這個函數(shù)其實(shí)很清晰,它先求值,然后把 dirty 置為 false。再回頭看看我們剛剛那段 Object.defineProperty 的邏輯,下次沒有特殊情況再讀取到 sum 的時候,發(fā)現(xiàn) dirty是false了,是不是直接就返回 watcher.value 這個值就可以了,這其實(shí)就是計(jì)算屬性緩存的概念。
依賴收集初始化完成之后,最終會調(diào)用render進(jìn)行渲染,而render函數(shù)會作為watcher的getter,此時的watcher為渲染watcher。
updateComponent = () => { vm._update(vm._render(), hydrating)}// 創(chuàng)建一個渲染watcher,渲染watcher初始化時,就會調(diào)用其get()方法,即render函數(shù),就會進(jìn)行依賴收集new Watcher(vm, updateComponent, noop, {}, true /* isRenderWatcher */)
看一下watcher中的get方法
get () { // 將當(dāng)前watcher放入棧頂,同時設(shè)置給Dep.target pushTarget(this) let value const vm = this.vm // 調(diào)用用戶定義的函數(shù),會訪問到this.count,從而訪問其getter方法,下面會講到 value = this.getter.call(vm, vm) // 求值結(jié)束后,當(dāng)前watcher出棧 popTarget() this.cleanupDeps() return value }
渲染watcher的getter執(zhí)行時(render函數(shù)),會訪問到this.sum,就會觸發(fā)該計(jì)算屬性的getter,即在initComputed時定義的該方法,會把與sum綁定的計(jì)算watcher得到之后,因?yàn)槌跏蓟瘯rdirty為true,會調(diào)用其evaluate方法,最終會調(diào)用其get()方法,把該計(jì)算watcher放入棧頂,此時Dep.target也為該計(jì)算watcher。
接著調(diào)用其get方法,就會訪問到this.count,會觸發(fā)count屬性的getter(如下),就會將當(dāng)前Dep.target存放的watcher收集到count屬性對應(yīng)的dep中。此時求值結(jié)束,調(diào)用popTarget()將該watcher出棧,此時上個渲染watcher就在棧頂了,Dep.target重新為渲染watcher。
// 在閉包中,會保留對于 count 這個 key 所定義的 depconst dep = new Dep() // 閉包中也會保留上一次 set 函數(shù)所設(shè)置的 vallet val Object.defineProperty(obj, key, { get: function reactiveGetter () { const value = val // Dep.target 此時就是計(jì)算watcher if (Dep.target) { // 收集依賴 dep.depend() } return value },})
// dep.depend()depend () { if (Dep.target) { Dep.target.addDep(this) }}
// watcher 的 addDep函數(shù)addDep (dep: Dep) { // 這里做了一系列的去重操作 簡化掉 // 這里會把 count 的 dep 也存在自身的 deps 上 this.deps.push(dep) // 又帶著 watcher 自身作為參數(shù) // 回到 dep 的 addSub 函數(shù)了 dep.addSub(this)}
class Dep { subs = [] addSub (sub: Watcher) { this.subs.push(sub) }}
通過這兩段代碼,計(jì)算watcher就被屬性所綁定dep所收集。watcher依賴dep,dep同時也依賴watcher,它們之間的這種相互依賴的數(shù)據(jù)結(jié)構(gòu),可以方便知道一個watcher被哪些dep依賴和一個dep依賴了哪些watcher。
接著執(zhí)行watcher.depend()
// watcher.dependdepend () { let i = this.deps.length while (i--) { this.deps[i].depend() }}
還記得剛剛的 計(jì)算watcher 的形態(tài)嗎?它的 deps 里保存了 count 的 dep。也就是說,又會調(diào)用 count 上的 dep.depend()
class Dep { subs = [] depend () { if (Dep.target) { Dep.target.addDep(this) } }}
這次的 Dep.target 已經(jīng)是 渲染watcher 了,所以這個 count 的 dep 又會把 渲染watcher 存放進(jìn)自身的 subs 中。
最終count的依賴收集完畢,它的dep為:
{ subs: [ sum的計(jì)算watcher,渲染watcher ]}派發(fā)更新
那么來到了此題的重點(diǎn),這時候 count 更新了,是如何去觸發(fā)視圖更新的呢?
再回到 count 的響應(yīng)式劫持邏輯里去:
// 在閉包中,會保留對于 count 這個 key 所定義的 depconst dep = new Dep() // 閉包中也會保留上一次 set 函數(shù)所設(shè)置的 vallet val Object.defineProperty(obj, key, { set: function reactiveSetter (newVal) { val = newVal // 觸發(fā) count 的 dep 的 notify dep.notify() } })})
好,這里觸發(fā)了我們剛剛精心準(zhǔn)備的 count 的 dep 的 notify 函數(shù)。
class Dep { subs = [] notify () { for (let i = 0, l = subs.length; i < l; i++) { subs[i].update() } }}
這里的邏輯就很簡單了,把 subs 里保存的 watcher 依次去調(diào)用它們的 update 方法,也就是
調(diào)用 計(jì)算watcher 的 update 調(diào)用 渲染watcher 的 update計(jì)算watcher的update
update () { if (this.lazy) { this.dirty = true }}
僅僅是把 計(jì)算watcher 的 dirty 屬性置為 true,靜靜的等待下次讀取即可(再次執(zhí)行render函數(shù)時,會再次訪問到sum屬性,此時的dirty為true,就會進(jìn)行再次求值)。
渲染watcher的update
這里其實(shí)就是調(diào)用 vm._update(vm._render()) 這個函數(shù),重新根據(jù) render 函數(shù)生成的 vnode 去渲染視圖了。而在 render 的過程中,一定會訪問到su 這個值,那么又回到sum定義的get上:
Object.defineProperty(target, key, { get() {const watcher = this._computedWatchers && this._computedWatchers[key]if (watcher) { // 上一步中 dirty 已經(jīng)置為 true, 所以會重新求值 if (watcher.dirty) { watcher.evaluate() } if (Dep.target) { watcher.depend() } // 最后返回計(jì)算出來的值 return watcher.value} }})
由于上一步中的響應(yīng)式屬性更新,觸發(fā)了 計(jì)算 watcher 的 dirty 更新為 true。所以又會重新調(diào)用用戶傳入的 sum 函數(shù)計(jì)算出最新的值,頁面上自然也就顯示出了最新的值。
至此為止,整個計(jì)算屬性更新的流程就結(jié)束了。
總結(jié)一下 初始化data和computed,分別代理其set以及get方法, 對data中的所有屬性生成唯一的dep實(shí)例。 對computed中的sum生成唯一watcher,并保存在vm._computedWatchers中 執(zhí)行render函數(shù)時會訪問sum屬性,從而執(zhí)行initComputed時定義的getter方法,會將Dep.target指向sum的watcher,并調(diào)用該屬性具體方法sum。 sum方法中訪問this.count,即會調(diào)用this.count代理的get方法,將this.count的dep加入sum的watcher,同時該dep中的subs添加這個watcher。 設(shè)置vm.count = 2,調(diào)用count代理的set方法觸發(fā)dep的notify方法,因?yàn)槭莄omputed屬性,只是將watcher中的dirty設(shè)置為true。 最后一步vm.sum,訪問其get方法時,得知sum的watcher.dirty為true,調(diào)用其watcher.evaluate()方法獲取新的值。以上就是詳解vue computed的緩存實(shí)現(xiàn)原理的詳細(xì)內(nèi)容,更多關(guān)于vue computed的緩存實(shí)現(xiàn)的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. ASP動態(tài)網(wǎng)頁制作技術(shù)經(jīng)驗(yàn)分享2. .Net Core和RabbitMQ限制循環(huán)消費(fèi)的方法3. JSP之表單提交get和post的區(qū)別詳解及實(shí)例4. Xml簡介_動力節(jié)點(diǎn)Java學(xué)院整理5. 詳解瀏覽器的緩存機(jī)制6. jsp文件下載功能實(shí)現(xiàn)代碼7. 如何在jsp界面中插入圖片8. phpstudy apache開啟ssi使用詳解9. jsp實(shí)現(xiàn)登錄驗(yàn)證的過濾器10. vue3+ts+elementPLus實(shí)現(xiàn)v-preview指令
