快捷導(dǎo)航

詳解Vue計(jì)算屬性原理

更新時(shí)間：2023年05月24日 09:09:04 作者：WeilinerL

計(jì)算屬性是Vue中比較好用的API，開發(fā)者可以利用計(jì)算屬將復(fù)雜的計(jì)算進(jìn)行緩存，同時(shí)基于它的響應(yīng)式特性，我們無需關(guān)注數(shù)據(jù)更新問題，但需要注意的是，計(jì)算屬性是惰性求值的，本文將詳細(xì)介紹計(jì)算屬性的實(shí)現(xiàn)原理,需要的朋友可以參考下

初始化

組件初始化時(shí)會(huì)調(diào)用掛載在Vue原型鏈上的_init方法，即Vue.prototype._init:

function Vue(options) {
  this._init(options)
}

同時(shí)_init方法會(huì)調(diào)用initState方法，這個(gè)方法主要用來初始化props、methods、data、watch以及本文所介紹的computed:

Vue.prototype._init = function (options?: Record<string, any>) {
    // ...省略一些代碼
    initState(vm)
    // ...省略一些代碼
}

為了看上去一目了然，這里省略了一些代碼（包括判斷條件）

export function initState(vm: Component) {
  // ..省略了一些代碼
  initProps(vm, opts.props)
  initMethods(vm, opts.methods)
  initData(vm)
  initComputed(vm, opts.computed)
  initWatch(vm, opts.watch)
}

走到這里之后，程序就進(jìn)入了初始化計(jì)算屬性的過程中

initComputed

在這個(gè)方法里，主要做了兩件事：

遍歷用戶傳入的計(jì)算屬性，生成相應(yīng)的Wacher，每個(gè)Watcher都被標(biāo)記為lazy
在組件實(shí)例vm上掛載同名屬性，值為一個(gè)按條件生成的getter函數(shù)

以下代碼有省略

function initComputed(vm: Component, computed: Object) {
  const watchers = (vm._computedWatchers = Object.create(null))
  for (const key in computed) {
    const userDef = computed[key];
    // 獲取用戶自定義的計(jì)算屬性getter
    const getter = isFunction(userDef) ? userDef : userDef.get;
    watchers[key] = new Watcher(
      vm,
      getter || noop,
      noop,
      { lazy: true }
    );
    defineComputed(vm, key, userDef);
  }
}

其中new Watcher會(huì)生成Watcher實(shí)例：

export default class Watcher implements DepTarget {
  constructor(
    vm: Component | null,
    expOrFn: string | (() => any),
    cb: Function,
    options?: WatcherOptions | null,
    isRenderWatcher?: boolean
  ) {
    this.getter = expOrFn
    this.value = this.lazy ? undefined : this.get();
  }

因?yàn)槲覀儌魅氲?code>lazy配置，Wacher不會(huì)執(zhí)行Watcher.prototype.get()方法，這個(gè)方法主要用于依賴收集

defineComputed

這個(gè)方法主要是在組件實(shí)例上生成相應(yīng)的計(jì)算屬性，便于我們?cè)诮M件內(nèi)部通過this[key]的方式進(jìn)行獲取，主要代碼如下：

export function defineComputed(
  target: any,
  key: string,
  userDef: Record<string, any> | (() => any)
) {
  sharedPropertyDefinition.get = createComputedGetter(key);
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

這里的target就是組件實(shí)例，key即為我們定義的相應(yīng)的響應(yīng)式屬性名，它的值是一個(gè) 生成的getter;

createComputedGetter

有了訪問屬性的方式，那么就需要返回相應(yīng)的計(jì)算屬性值，這個(gè)方法主要用來實(shí)現(xiàn)計(jì)算屬性的惰性求值的：

function createComputedGetter(key) {
  return function computedGetter() {
    const watcher = this._computedWatchers && this._computedWatchers[key]
    if (watcher) {
      if (watcher.dirty) {
        watcher.evaluate()
      }
      // ...
      return watcher.value
    }
  }
}

這里返回的函數(shù)就是用于設(shè)置Object.defineProperty的getter的存取描述符get,它會(huì)根據(jù)watcher.dirty，判斷是否需要調(diào)用方法watcher.evaluate()進(jìn)行求值。在watcher.evaluate方法里主要做兩件事：

調(diào)用get方法進(jìn)行依賴收集（會(huì)調(diào)用我們?cè)谟?jì)算屬性上定義的函數(shù)，從而觸發(fā)相應(yīng)的響應(yīng)式數(shù)據(jù)的getter進(jìn)行依賴收集）
將watcher的dirty標(biāo)志位置為false

this.value = this.get()
this.dirty = false

完成了上述步驟后，整個(gè)響應(yīng)式屬性就建立完畢，當(dāng)計(jì)算屬性依賴的數(shù)據(jù)發(fā)生變化時(shí)，會(huì)調(diào)用watcher.update()方法，這個(gè)方法會(huì)再次將dirty標(biāo)志位寫為false。當(dāng)我們?cè)谀０胬锘蚱渌胤皆L問組件實(shí)例上的響應(yīng)式屬性后，就會(huì)觸發(fā)上述定義的createComputedGetter返回的函數(shù)。從而進(jìn)行wacher.evaluate()求值進(jìn)行重新計(jì)算，計(jì)算完成后又將dirty置為false，等待下一次重新計(jì)算。如果我們不妨問這個(gè)屬性，那么是不會(huì)觸發(fā)getter，從而進(jìn)行計(jì)算的（惰性求值）。