詳解vue computed的緩存實(shí)現(xiàn)原理

更新時間：2021年04月08日 10:57:26 作者：seven

這篇文章主要介紹了vue computed的緩存實(shí)現(xiàn)原理，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下

<div id="app">
  <span @click="change">{{sum}}</span>
</div>
<script src="./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)行計算屬性的初始化

if (opts.computed) {initComputed(vm, opts.computed);}

下面是initComputed的代碼

var watchers = vm._computedWatchers = Object.create(null); 
// 依次為每個 computed 屬性定義一個計算watcher
for (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)
}

每個計算屬性對應(yīng)的計算watcher的初始狀態(tài)如下：

{
    deps: [],
    dirty: true,
    getter: ƒ sum(),
    lazy: true,
    value: undefined
}

可以看到它的 value 剛開始是 undefined，lazy 是 true，說明它的值是惰性計算的，只有到真正在模板里去讀取它的值后才會計算。

這個 dirty 屬性其實(shí)是緩存的關(guān)鍵，先記住它。

接下來看看比較關(guān)鍵的 defineComputed，它決定了用戶在讀取 this.sum 這個計算屬性的值后會發(fā)生什么，繼續(xù)簡化，排除掉一些不影響流程的邏輯。

Object.defineProperty(target, key, { 
    get() {
        // 從剛剛說過的組件實(shí)例上拿到 computed watcher
        const 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()
          }
          // 最后返回計算出來的值
          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í)就是計算屬性緩存的概念。

依賴收集

初始化完成之后，最終會調(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ā)該計算屬性的getter，即在initComputed時定義的該方法，會把與sum綁定的計算watcher得到之后，因?yàn)槌跏蓟瘯rdirty為true，會調(diào)用其evaluate方法，最終會調(diào)用其get()方法，把該計算watcher放入棧頂，此時Dep.target也為該計算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 所定義的 dep
const dep = new Dep()
 
// 閉包中也會保留上一次 set 函數(shù)所設(shè)置的 val
let val
 
Object.defineProperty(obj, key, {
  get: function reactiveGetter () {
    const value = val
    // Dep.target 此時就是計算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)
  }
}

通過這兩段代碼，計算watcher就被屬性所綁定dep所收集。watcher依賴dep，dep同時也依賴watcher，它們之間的這種相互依賴的數(shù)據(jù)結(jié)構(gòu)，可以方便知道一個watcher被哪些dep依賴和一個dep依賴了哪些watcher。

接著執(zhí)行watcher.depend()

// watcher.depend
depend () {
  let i = this.deps.length
  while (i--) {
    this.deps[i].depend()
  }
}

還記得剛剛的計算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的計算watcher，渲染watcher ]
}

派發(fā)更新

那么來到了此題的重點(diǎn)，這時候 count 更新了，是如何去觸發(fā)視圖更新的呢？

再回到 count 的響應(yīng)式劫持邏輯里去：

// 在閉包中，會保留對于 count 這個 key 所定義的 dep
const dep = new Dep()
 
// 閉包中也會保留上一次 set 函數(shù)所設(shè)置的 val
let 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)用計算watcher 的 update
調(diào)用渲染watcher 的 update

計算watcher的update

update () {
  if (this.lazy) {
    this.dirty = true
  }
}

僅僅是把計算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()
          }
          // 最后返回計算出來的值
          return watcher.value
        }
    }
})

由于上一步中的響應(yīng)式屬性更新，觸發(fā)了計算 watcher 的 dirty 更新為 true。所以又會重新調(diào)用用戶傳入的 sum 函數(shù)計算出最新的值，頁面上自然也就顯示出了最新的值。

至此為止，整個計算屬性更新的流程就結(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)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: