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


Posted in Javascript onMay 29, 2018

Computed 计算属性是 Vue 中常用的一个功能,但你理解它是怎么工作的吗?

拿官网简单的例子来看一下:

<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('')
  }
 }
})

Situation

Vue 里的 Computed 属性非常频繁的被使用到,但并不是很清楚它的实现原理。比如:计算属性如何与属性建立依赖关系?属性发生变化又如何通知到计算属性重新计算?

关于如何建立依赖关系,我的第一个想到的就是语法解析,但这样太浪费性能,因此排除,第二个想到的就是利用 JavaScript 单线程的原理和 Vue 的 Getter 设计,通过一个简单的发布订阅,就可以在一次计算属性求值的过程中收集到相关依赖。

因此接下来的任务就是从 Vue 源码一步步分析 Computed 的实现原理。

Task

分析依赖收集实现原理,分析动态计算实现原理。

Action

data 属性初始化 getter setter:

// src/observer/index.js

// 这里开始转换 data 的 getter setter,原始值已存入到 __ob__ 属性中
Object.defineProperty(obj, key, {
 enumerable: true,
 configurable: true,
 get: function reactiveGetter () {
  const value = getter ? getter.call(obj) : val
  // 判断是否处于依赖收集状态
  if (Dep.target) {
   // 建立依赖关系
   dep.depend()
   ...
  }
  return value
 },
 set: function reactiveSetter (newVal) {
  ...
  // 依赖发生变化,通知到计算属性重新计算
  dep.notify()
 }
})

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: ?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() 类似,
   // 但 update 是给依赖变化时使用的,包含对 watch 的处理
   subs[i].update()
  }
 }
}

// 当首次计算 computed 属性的值时,Dep 将会在计算期间对依赖进行收集
Dep.target = null
const targetStack = []

export function pushTarget (_target: Watcher) {
 // 在一次依赖收集期间,如果有其他依赖收集任务开始(比如:当前 computed 计算属性嵌套其他 computed 计算属性),
 // 那么将会把当前 target 暂存到 targetStack,先进行其他 target 的依赖收集,
 if (Dep.target) targetStack.push(Dep.target)
 Dep.target = _target
}

export function popTarget () {
 // 当嵌套的依赖收集任务完成后,将 target 恢复为上一层的 Watcher,并继续做依赖收集
 Dep.target = targetStack.pop()
}

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 使用层面。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
前端微信支付js代码
Jul 25 Javascript
js严格模式总结(分享)
Aug 22 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
javascript、php关键字搜索函数的使用方法
May 29 #Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 #Javascript
Vue 组件传值几种常用方法【总结】
May 28 #Javascript
讲解vue-router之命名路由和命名视图
May 28 #Javascript
微信小程序实现图片上传功能
May 28 #Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 #Javascript
讲解vue-router之什么是编程式路由
May 28 #Javascript
You might like
用PHP来计算某个目录大小的方法
2014/04/01 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
PDO::prepare讲解
2019/01/29 PHP
Js+XML 操作
2006/09/20 Javascript
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
Javascript 中介者模式实例
2009/12/16 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
python在每个字符后添加空格的实例
2018/05/07 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
计算机毕业大学生推荐信
2013/12/01 职场文书
教师考核评语
2014/04/28 职场文书
2014年市场部工作总结
2014/11/25 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
给朋友的赠语
2015/06/23 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
服务器间如何实现文件共享
2022/05/20 Servers