摘要：如果没有缓存，我们将不可避免的多次执行的现在我们要开始讲解，是如何判断是否使用缓存的首先计算后，会把计算得到的值保存到一个变量中。当使用缓存时，就直接返回这个变量。
写文章不容易，点个赞呗兄弟
专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧
研究基于 Vue版本 【2.5.17】
如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧
【Vue原理】月老Computed - 白话版
今天我们用白话文解读 computed 的工作原理，轻松快速理解 computed 内部工作原理。因为如果你不懂原理，有时候做项目，碰到奇怪的问题，真的不知道怎么回事
要理解 computed 的工作原理，只需要理解下面三个问题
1、computed 也是响应式的
2、computed 如何控制缓存
3、依赖的 data 改变了，computed 如何更新
开始我们今天的讲解，希望你认真看完会有收获
“必须有收获谢谢，不然我不白写了吗兄弟”
在这里，我先告诉你，computed 其实是一个 月老，专门牵线
computed 也是响应式的什么是响应式，不知道的童鞋请参考我以前的文章
【Vue原理】响应式原理 - 白话版
你给 computed 设置的 get 和 set 函数，会跟 Object.defineProperty 关联起来
所以 Vue 能捕捉到 读取computed 和 赋值computed 的操作
读取computed 时，会执行你设置的 get 函数，但是并没有这么简单，因为还有一层缓存的操作
赋值 computed 时，会执行你设置的 set 函数，这个就比较简单，会直接把 set 赋值给 Object.defineProperty - set
Computed 如何控制缓存我们都知道，computed 是有缓存的，官方已经说明
"计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值"
"我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter"
现在我们要开始讲解，Computed 是如何判断是否使用缓存的
首先 computed 计算后，会把计算得到的值保存到一个变量中。读取 computed 时便直接返回这个变量。
当使用缓存时，就直接返回这个变量。当 computed 更新时，就会重新赋值更新这个变量
computed 控制缓存的重要一点是 【脏数据标志位 dirty】，dirty 是 watcher 的一个属性
当 dirty 为 true 时，读取 computed 会重新计算
当 dirty 为 false 时，读取 computed 会使用缓存
1一开始每个 computed 新建自己的watcher时，会设置 watcher.dirty = true，以便于computed 被使用时，会计算得到值
2当 依赖的数据变化了，通知 computed 时，会设置 watcher.dirty = true，以便于其他地方重新渲染，从而重新读取 computed 时，此时 computed 重新计算
3computed 计算完成之后，会设置 watcher.dirty = false，以便于其他地方再次读取时，使用缓存，免于计算
依赖的data变化，computed如何更新首先，data 和 computed 本质上差不多，都是数据，都需要被使用。
当 A 引用 B 的时候，B 会收集 A 的watcher，不明白的可以参考之前文章
【Vue原理】响应式原理 - 白话版
现在 页面A 引用了 computed B，computed B 依赖了 data C
像是这样，A->B->C 的依赖顺序
一开始我的想法是，data C 开始变化后.......
1通知 computed B 更新，然后 computed B 开始重新计算
2接着 computed B 通知 页面A更新，然后重新读取 computed
一条链式的操作？ C -》 B -》 A 这样的执行顺序吗？
答案：不是
其实真正的流程是，data C 开始变化后.......
1通知 computed B watcher 更新，其实只会重置 脏数据标志位 dirty =true，不会计算值
2通知 页面 A watcher 进行更新渲染，进而重新读取 computed B ，然后 computed B 开始重新计算
data C 的依赖收集器会同时收集到 computed B 和 页面 A 的 watcher
这就是 Vue 设计的巧妙之处了，也就是我开始讲的，computed 其实是一个 月老
在 页面 A 在读取 computed B 的时候，趁机把 页面A 介绍给 data C ，于是 页面A watcher 和 data C 间接牵在了一起，于是 data C 就会收集到 页面A watcher
至于怎么牵在一起，白话版不会多说，不浪费大家的脑力
被依赖通知更新后，重置 脏数据标志位 ，页面读取 computed 时再更新值
总结1computed 通过 watcher.dirty 控制是否读取缓存
2computed 会让 【data依赖】 收集到 【依赖computed的watcher】，从而 data 变化时，会同时通知 computed 和 依赖computed的地方
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/105087.html
摘要：被读取，包装的函数触发，第一次会进行计算被调用，进而被调用，被设置为，旧值页面被缓存起来。计算会读取，此时就收集到同时也会保存到的依赖收集器用于下一步。 写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本 【2.5.17】 如果你觉得排版难看，请点击 下面链接 或者 拉到 下...
写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本 【2.5.17】 如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧 【Vue原理】Props - 源码版 今天记录 Props 源码流程，哎，这东西，就算是研究过了，也真是会随着时间慢慢忘记的。 幸好我做...
摘要：所以我今后打算把每一个内容分成白话版和源码版。有什么错误的地方，感谢大家能够指出响应式系统我们都知道，只要在实例中声明过的数据，那么这个数据就是响应式的。什么是响应式，也即是说，数据发生改变的时候，视图会重新渲染，匹配更新为最新的值。 写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 V...
摘要：而我觉得现在出一个白话版，是让大家有兴趣去研究源码的时候，可以提前理清一下思路。相当于封装，提取公共部分。显然，今天我不是来教大家怎么用的，怎么用看文档就好了，我是讲解生命的真谛内部的工作原理。而这个不会合并，直接替换掉整个选项 写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版...
写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本 【2.5.17】 如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧 【Vue原理】Mixins - 源码版 今天探索的是 mixins 的源码，mixins 根据不同的选项类型会做不同的处理 篇幅会有些长，...
阅读 2349·2021-11-16 11:45
阅读 2322·2021-10-11 10:59
阅读 2023·2021-10-08 10:05
阅读 3482·2021-09-23 11:30
阅读 2193·2021-09-07 09:58
阅读 565·2019-08-30 15:55
阅读 655·2019-08-30 15:53
阅读 1816·2019-08-29 17:00
