深入理解Vue Computed計(jì)算屬性原理

<div id="example">
 <p>Original message: "{{ message }}"</p>
 <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
 el: '#example',
 data: {
  message: 'Hello'
 },
 computed: {
  // a computed getter
  reversedMessage: function () {
   // `this` points to the vm instance
   return this.message.split('').reverse().join('')
  }
 }
})

// src/observer/index.js

// 這里開(kāi)始轉(zhuǎn)換 data 的 getter setter，原始值已存入到 __ob__ 屬性中
Object.defineProperty(obj, key, {
 enumerable: true,
 configurable: true,
 get: function reactiveGetter () {
  const value = getter ? getter.call(obj) : val
  // 判斷是否處于依賴(lài)收集狀態(tài)
  if (Dep.target) {
   // 建立依賴(lài)關(guān)系
   dep.depend()
   ...
  }
  return value
 },
 set: function reactiveSetter (newVal) {
  ...
  // 依賴(lài)發(fā)生變化，通知到計(jì)算屬性重新計(jì)算
  dep.notify()
 }
})

// src/core/instance/state.js

// 初始化計(jì)算屬性
function initComputed (vm: Component, computed: Object) {
 ...
 // 遍歷 computed 計(jì)算屬性
 for (const key in computed) {
  ...
  // 創(chuàng)建 Watcher 實(shí)例
  // create internal watcher for the computed property.
  watchers[key] = new Watcher(vm, getter || noop, noop, computedWatcherOptions)

  // 創(chuàng)建屬性 vm.reversedMessage，并將提供的函數(shù)將用作屬性 vm.reversedMessage 的 getter，
  // 最終 computed 與 data 會(huì)一起混合到 vm 下，所以當(dāng) computed 與 data 存在重名屬性時(shí)會(huì)拋出警告
  defineComputed(vm, key, userDef)
  ...
 }
}

export function defineComputed (target: any, key: string, userDef: Object | Function) {
 ...
 // 創(chuàng)建 get set 方法
 sharedPropertyDefinition.get = createComputedGetter(key)
 sharedPropertyDefinition.set = noop
 ...
 // 創(chuàng)建屬性 vm.reversedMessage，并初始化 getter setter
 Object.defineProperty(target, key, sharedPropertyDefinition)
}

function createComputedGetter (key) {
 return function computedGetter () {
  const watcher = this._computedWatchers && this._computedWatchers[key]
  if (watcher) {
   if (watcher.dirty) {
    // watcher 暴露 evaluate 方法用于取值操作
    watcher.evaluate()
   }
   // 同第1步，判斷是否處于依賴(lài)收集狀態(tài)
   if (Dep.target) {
    watcher.depend()
   }
   return watcher.value
  }
 }
}

// src/core/observer/watcher.js

// 當(dāng)通過(guò) vm.reversedMessage 獲取計(jì)算屬性時(shí)，就會(huì)進(jìn)到這個(gè) getter 方法
get () {
 // this 指的是 watcher 實(shí)例
 // 將當(dāng)前 watcher 實(shí)例暫存到 Dep.target，這就表示開(kāi)啟了依賴(lài)收集任務(wù)
 pushTarget(this)
 let value
 const vm = this.vm
 try {
  // 在執(zhí)行 vm.reversedMessage 的函調(diào)函數(shù)時(shí)，會(huì)觸發(fā)屬性（步驟1）和計(jì)算屬性（步驟2）的 getter
  // 在這個(gè)執(zhí)行過(guò)程中，就可以收集到 vm.reversedMessage 的依賴(lài)了
  value = this.getter.call(vm, vm)
 } catch (e) {
  if (this.user) {
   handleError(e, vm, `getter for watcher "${this.expression}"`)
  } else {
   throw e
  }
 } finally {
  if (this.deep) {
   traverse(value)
  }
  // 結(jié)束依賴(lài)收集任務(wù)
  popTarget()
  this.cleanupDeps()
 }
 return value
}

// src/core/observer/dep.js

export default class Dep {
 static target: ?Watcher;
 id: number;
 subs: Array<Watcher>;

 constructor () {
  this.id = uid++
  this.subs = []
 }

 addSub (sub: Watcher) {
  this.subs.push(sub)
 }

 removeSub (sub: Watcher) {
  remove(this.subs, sub)
 }

 depend () {
  if (Dep.target) {
   Dep.target.addDep(this)
  }
 }

 notify () {
  const subs = this.subs.slice()
  for (let i = 0, l = subs.length; i < l; i++) {
   // 更新 watcher 的值，與 watcher.evaluate() 類(lèi)似，
   // 但 update 是給依賴(lài)變化時(shí)使用的，包含對(duì) watch 的處理
   subs[i].update()
  }
 }
}

// 當(dāng)首次計(jì)算 computed 屬性的值時(shí)，Dep 將會(huì)在計(jì)算期間對(duì)依賴(lài)進(jìn)行收集
Dep.target = null
const targetStack = []

export function pushTarget (_target: Watcher) {
 // 在一次依賴(lài)收集期間，如果有其他依賴(lài)收集任務(wù)開(kāi)始（比如：當(dāng)前 computed 計(jì)算屬性嵌套其他 computed 計(jì)算屬性），
 // 那么將會(huì)把當(dāng)前 target 暫存到 targetStack，先進(jìn)行其他 target 的依賴(lài)收集，
 if (Dep.target) targetStack.push(Dep.target)
 Dep.target = _target
}

export function popTarget () {
 // 當(dāng)嵌套的依賴(lài)收集任務(wù)完成后，將 target 恢復(fù)為上一層的 Watcher，并繼續(xù)做依賴(lài)收集
 Dep.target = targetStack.pop()
}