深入理解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 相关文章推荐
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
Mar 04 Javascript
12306验证码破解思路分享
Mar 25 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
jQuery点击导航栏选中更换样式的实现代码
Jan 23 Javascript
从零学习node.js之模块规范(一)
Feb 21 Javascript
react-native封装插件swiper的使用方法
Mar 20 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 Javascript
vue+canvas实现移动端手写签名
May 21 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 Javascript
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
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
jquery $.ajax入门应用一
2008/11/19 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
javascript数据类型详解
2017/02/07 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
python下调用pytesseract识别某网站验证码的实现方法
2016/06/06 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
XML文档面试题
2015/08/05 面试题
单位承诺书格式
2014/05/21 职场文书
企业优秀员工事迹材料
2014/05/28 职场文书
大学生学习计划书
2014/09/15 职场文书
热情服务标语
2014/10/07 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
欠款起诉书范文
2015/05/19 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
浅谈Python中对象是如何被调用的
2022/04/06 Python