[分享] 浅谈 Vue 中 computed 实现原理

shmmsond · 2018-09-12T08:35:39Z

流程总结如下：当组件初始化的时候， computed 和 data 会分别建立各自的响应系统， Observer 遍历 data 中每个属性设置 get/set 数据拦截初始化 computed 会调用 initComputed 函数注册一个 watcher 实例，并在内实例化一个 Dep 消息订阅器用作后续收集依赖（比如渲染函数的 watcher 或者其他观察该计算属性变化的 watcher ）调用计算属性时会触发其 Object.defineProperty 的 get 访问器函数调用 watcher.depend() 方法向自身的消息订阅器 dep 的 subs 中添加其他属性的 watcher 调用 watcher 的 evaluate 方法（进而调用 watcher 的 get 方法）让自身成为其他 watcher 的消息订阅器的订阅者，首先将 watcher 赋给 Dep.target ，然后执行 getter 求值函数，当访问求值函数里面的属性（比如来自 data 、 props 或其他 computed ）时，会同样触发它们的 get 访问器函数从而将该计算属性的 watcher 添加到求值函数中属性的 watcher 的消息订阅器 dep 中，当这些操作完成，最后关闭 Dep.target 赋为 null 并返回求值函数结果。当某个属性发生变化，触发 set 拦截函数，然后调用自身消息订阅器 dep 的 notify 方法，遍历当前 dep 中保存着所有订阅者 wathcer 的 subs 数组，并逐个调用 watcher 的 update 方法，完成响应更新。你可以在创宇前端微信公众号(KnownsecFED)或掘金社区读到这篇文章的全文。

如果想在 V2EX 获得更好的推广效果，欢迎了解 PRO 会员机制：
https://www.v2ex.com/pro/about

如果你经常使用铜币置顶主题，持有 V2EX Solana Token 会在每日签到时获得额外铜币：
https://www.v2ex.com/solana

You need to sign in to view this topic

This topic created in 2938 days ago, the information mentioned may be changed or developed.

流程总结如下：

当组件初始化的时候，computed 和 data 会分别建立各自的响应系统，Observer遍历 data 中每个属性设置 get/set 数据拦截
初始化 computed 会调用 initComputed 函数
1. 注册一个 watcher 实例，并在内实例化一个 Dep 消息订阅器用作后续收集依赖（比如渲染函数的 watcher 或者其他观察该计算属性变化的 watcher ）
2. 调用计算属性时会触发其Object.defineProperty的get访问器函数
3. 调用 watcher.depend() 方法向自身的消息订阅器 dep 的 subs 中添加其他属性的 watcher
4. 调用 watcher 的 evaluate 方法（进而调用 watcher 的 get 方法）让自身成为其他 watcher 的消息订阅器的订阅者，首先将 watcher 赋给 Dep.target，然后执行 getter 求值函数，当访问求值函数里面的属性（比如来自 data、props 或其他 computed）时，会同样触发它们的 get 访问器函数从而将该计算属性的 watcher 添加到求值函数中属性的 watcher 的消息订阅器 dep 中，当这些操作完成，最后关闭 Dep.target 赋为 null 并返回求值函数结果。
当某个属性发生变化，触发 set 拦截函数，然后调用自身消息订阅器 dep 的 notify 方法，遍历当前 dep 中保存着所有订阅者 wathcer 的 subs 数组，并逐个调用 watcher 的 update 方法，完成响应更新。

你可以在创宇前端微信公众号(KnownsecFED)或掘金社区读到这篇文章的全文。

watcher

函数

dep

调用

1 replies • 2018-09-14 06:52:07 +08:00

Erskine

Sep 14, 2018 via Android

第一次调用一个 computed 方法 -> 搜集方法里面所有的依赖的变量
依赖的变量更新 -> 通知被依赖的方法更新数据。