深入理解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 相关文章推荐
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 Javascript
Express + Session 实现登录验证功能
Sep 08 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
js+css3实现炫酷时钟
Aug 18 Javascript
解决Vue watch里调用方法的坑
Nov 07 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
php4的session功能评述(三)
2006/10/09 PHP
发布一个用PHP fsockopen写的HTTP下载的类
2007/02/22 PHP
php基础教程 php内置函数实例教程
2012/08/21 PHP
php显示时间常用方法小结
2015/06/05 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
PHP实现简易图形计算器
2020/08/28 PHP
javascript实现按回车键切换焦点
2015/02/09 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
用Python实现QQ游戏大家来找茬辅助工具
2014/09/14 Python
python实现从web抓取文档的方法
2014/09/26 Python
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
Python装饰器用法实例总结
2018/02/07 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
对python模块中多个类的用法详解
2019/01/10 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
社区春季防火方案
2014/06/02 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
幼儿教师个人总结
2015/02/05 职场文书
银行催款通知书
2015/04/17 职场文书
观后感的写法
2015/06/19 职场文书
班委竞选稿范文
2015/11/21 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书