当学习成为了习惯，常识也就变成了常识。 感激各位的 关注、点赞、珍藏和评论。
新视频和文章会第一工夫在微信公众号发送，欢送关注：李永宁lyn
文章已收录到 github 仓库 liyongning/blog，欢送 Watch 和 Star。
前言
上一篇文章 手写 Vue2 系列 之 patch —— diff 实现了 DOM diff 过程，实现页面响应式数据的更新。
指标
本篇的指标是实现 computed 计算属性，实现模版中计算属性的展现。波及的知识点：
- 计算属性的实质
- 计算属性的缓存原理
实现
接下来就开始实现 computed 计算属性，。
_init
/src/index.js
/** * 初始化配置对象 * @param {*} options */Vue.prototype._init = function (options) { // ... // 初始化 options.data // 代理 data 对象上的各个属性到 Vue 实例 // 给 data 对象上的各个属性设置响应式能力 initData(this) // 初始化 computed 选项，并将计算属性代理到 Vue 实例上 // 联合 watcher 实现缓存 initComputed(this) // 装置运行时的渲染工具函数 renderHelper(this) // ...}initComputed
/src/initComputed.js
/** * 初始化 computed 配置项 * 为每一项实例化一个 Watcher，并将其 computed 属性代理到 Vue 实例上 * 联合 watcher.dirty 和 watcher.evalute 实现 computed 缓存 * @param {*} vm Vue 实例 */export default function initComputed(vm) { // 获取 computed 配置项 const computed = vm.$options.computed // 记录 watcher const watcher = vm._watcher = Object.create(null) // 遍历 computed 对象 for (let key in computed) { // 实例化 Watcher，回调函数默认懒执行 watcher[key] = new Watcher(computed[key], { lazy: true }, vm) // 将 computed 的属性 key 代理到 Vue 实例上 defineComputed(vm, key) }}defineComputed
/src/initComputed.js
/** * 将计算属性代理到 Vue 实例上 * @param {*} vm Vue 实例 * @param {*} key computed 的计算属性 */function defineComputed(vm, key) { // 属性描述符 const descriptor = { get: function () { const watcher = vm._watcher[key] if (watcher.dirty) { // 阐明以后 computed 回调函数在本次渲染周期内没有被执行过 // 执行 evalute，告诉 watcher 执行 computed 回调函数，失去回调函数返回值 watcher.evalute() } return watcher.value }, set: function () { console.log('no setter') } } // 将计算属性代理到 Vue 实例上 Object.defineProperty(vm, key, descriptor)}Watcher
/src/watcher.js
/** * @param {*} cb 回调函数，负责更新 DOM 的回调函数 * @param {*} options watcher 的配置项 */export default function Watcher(cb, options = {}, vm = null) { // 备份 cb 函数 this._cb = cb // 回调函数执行后的值 this.value = null // computed 计算属性实现缓存的原理，标记以后回调函数在本次渲染周期内是否曾经被执行过 this.dirty = !!options.lazy // Vue 实例 this.vm = vm // 非懒执行时，间接执行 cb 函数，cb 函数中会产生 vm.xx 的属性读取，从而进行依赖收集 !options.lazy && this.get()}watcher.get
/src/watcher.js
/** * 负责执行 Watcher 的 cb 函数 * 执行时进行依赖收集 */Watcher.prototype.get = function () { pushTarget(this) this.value = this._cb.apply(this.vm) popTarget()}watcher.update
/src/watcher.js
/** * 响应式数据更新时，dep 告诉 watcher 执行 update 办法， * 让 update 办法执行 this._cb 函数更新 DOM */Watcher.prototype.update = function () { // 通过 Promise，将 this._cb 的执行放到 this.dirty = true 的前面 // 否则，在点击按钮时，computed 属性的第一次计算会无奈执行， // 因为 this._cb 执行的时候，会更新组件，获取计算属性的值的时候 this.dirty 仍然是 // 上一次的 false，导致无奈失去最新的的计算属性的值 // 不过这个在有了异步更新队列之后就不须要了，当然，毕竟异步更新对象的实质也是 Promise Promise.resolve().then(() => { this._cb() }) // 执行完 _cb 函数，DOM 更新结束，进入下一个渲染周期，所以将 dirty 置为 false // 当再次获取 计算属性 时就能够从新执行 evalute 办法获取最新的值了 this.dirty = true}watcher.evalute
/src/watcher.js
Watcher.prototype.evalute = function () { // 执行 get，触发计算函数 (cb) 的执行 this.get() // 将 dirty 置为 false，实现一次刷新周期内 computed 实现缓存 this.dirty = false}pushTarget
/src/dep.js
// 存储所有的 Dep.target// 为什么会有多个 Dep.target?// 组件会产生一个渲染 Watcher，在渲染的过程中如果解决到用户 Watcher，// 比方 computed 计算属性，这时候会执行 evalute -> get// 如果间接赋值 Dep.target，那 Dep.target 的上一个值 —— 渲染 Watcher 就会失落// 造成在 computed 计算属性之后渲染的响应式数据无奈实现依赖收集const targetStack = []/** * 备份本次传递进来的 Watcher，并将其赋值给 Dep.target * @param {*} target Watcher 实例 */export function pushTarget(target) { // 备份传递进来的 Watcher targetStack.push(target) Dep.target = target}popTarget
/src/dep.js
/** * 将 Dep.target 重置为上一个 Watcher 或者 null */export function popTarget() { targetStack.pop() Dep.target = targetStack[targetStack.length - 1]}后果
好了，到这里，Vue computed 属性实现就实现了，如果你能看到如下效果图，则阐明一切正常。
动图地址：https://gitee.com/liyongning/...
能够看到，页面中的计算属性曾经失常显示，而且也能够做到响应式更新，且具备缓存的能力（通过控制台查看 computed 输入）。
到这里，手写 Vue 系列就剩最初一部分内容了 —— 手写 Vue 系列 之 异步更新队列。
链接
- 配套视频，微信公众号回复："精通 Vue 技术栈源码原理视频版" 获取
- 精通 Vue 技术栈源码原理 专栏
- github 仓库 liyongning/Vue 欢送 Star
- github 仓库 liyongning/Lyn-Vue-DOM 欢送 Star
- github 仓库 liyongning/Lyn-Vue-Template 欢送 Star
感激各位的：关注、点赞、珍藏和评论，咱们下期见。
当学习成为了习惯，常识也就变成了常识。 感激各位的 关注、 点赞、珍藏和评论。
新视频和文章会第一工夫在微信公众号发送，欢送关注：李永宁lyn
文章已收录到 github 仓库 liyongning/blog，欢送 Watch 和 Star。