深入理解Vue Computed计算属性原理

<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

// 这里开始转换 data 的 getter setter，原始值已存入到 __ob__ 属性中
Object.defineProperty(obj, key, {
 enumerable: true,
 configurable: true,
 get: function reactiveGetter () {
  const value = getter "color: #ff0000">computed 计算属性初始化



// src/core/instance/state.js

// 初始化计算属性
function initComputed (vm: Component, computed: Object) {
 ...
 // 遍历 computed 计算属性
 for (const key in computed) {
  ...
  // 创建 Watcher 实例
  // create internal watcher for the computed property.
  watchers[key] = new Watcher(vm, getter || noop, noop, computedWatcherOptions)

  // 创建属性 vm.reversedMessage，并将提供的函数将用作属性 vm.reversedMessage 的 getter，
  // 最终 computed 与 data 会一起混合到 vm 下，所以当 computed 与 data 存在重名属性时会抛出警告
  defineComputed(vm, key, userDef)
  ...
 }
}

export function defineComputed (target: any, key: string, userDef: Object | Function) {
 ...
 // 创建 get set 方法
 sharedPropertyDefinition.get = createComputedGetter(key)
 sharedPropertyDefinition.set = noop
 ...
 // 创建属性 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步，判断是否处于依赖收集状态
   if (Dep.target) {
    watcher.depend()
   }
   return watcher.value
  }
 }
}




无论是属性还是计算属性，都会生成一个对应的 watcher 实例。


// src/core/observer/watcher.js

// 当通过 vm.reversedMessage 获取计算属性时，就会进到这个 getter 方法
get () {
 // this 指的是 watcher 实例
 // 将当前 watcher 实例暂存到 Dep.target，这就表示开启了依赖收集任务
 pushTarget(this)
 let value
 const vm = this.vm
 try {
  // 在执行 vm.reversedMessage 的函调函数时，会触发属性（步骤1）和计算属性（步骤2）的 getter
  // 在这个执行过程中，就可以收集到 vm.reversedMessage 的依赖了
  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)
  }
  // 结束依赖收集任务
  popTarget()
  this.cleanupDeps()
 }
 return value
}




上面多出提到了 dep.depend, dep.notify, Dep.target，那么 Dep 究竟是什么呢？
Dep 的代码短小精悍，但却承担着非常重要的依赖收集环节。


// src/core/observer/dep.js

export default class Dep {
 static target: "color: #ff0000">Result


总结一下依赖收集、动态计算的流程：
1. data 属性初始化 getter setter


2. computed 计算属性初始化，提供的函数将用作属性 vm.reversedMessage 的 getter


3. 当首次获取 reversedMessage 计算属性的值时，Dep 开始依赖收集


4. 在执行 message getter 方法时，如果 Dep 处于依赖收集状态，则判定 message 为 reversedMessage 的依赖，并建立依赖关系


5. 当 message 发生变化时，根据依赖关系，触发 reverseMessage 的重新计算

到此，整个 Computed 的工作流程就理清楚了。
Vue 是一个设计非常优美的框架，使用 Getter Setter 设计使依赖关系实现的非常顺其自然，使用计算与渲染分离的设计（优先使用 MutationObserver，降级使用 setTimeout）也非常贴合浏览器计算引擎与排版引擎分离的的设计原理。
如果你想成为一名架构师，不能只停留在框架的 API 使用层面。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。