深入理解深入理解Vue Computed计算属性原理计算属性原理
Computed 计算属性是 Vue 中常用的一个功能，本篇文章主要介绍了Vue Computed 计算属性原理，小编觉得
挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
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) {
...
评论0