computed 的工作原理

要理解computed 的工作原理 ,只需要理解下面三个问题

1.computed 也是响应式的

2.computed如何控制缓存

3.依赖的data改变了,computed如何更新

computed也是响应式的

给computed设置的get和set函数,会跟Object.defineProperty关联起来。所以Vue能捕捉到读取computed和赋值computed 的操作
读取computed时,会执行你设置的get函数,但是并没有这么简单,因为还有一层缓存的操作赋值computed的操作
赋值computed时,会执行你设置的set函数,这个就比较简单,会直接把set赋值给object.defineproperty-set

computed 如何控制缓存

question:我们为什么需要缓存呢?,假如我们有一个性能开销比较大的计算属性A,它需要遍历一个巨大的数组并做大量的计算,然后我们可能有其他的计算属性依赖于A,如果没有缓存,我们每需要一次A就需要多次A的getter

那么computed是如何判断是否使用缓存的?
computed就算后,会把计算得到的值保存在一个变量中,读取computed的时候便直接返回这个变量
computed控制缓存的重要一点是–【脏数据标志位dirty】,dirty是watcher的一个属性,当dirty为true的时候,读取computed会重新计算,当dirty为false,读取computed会使用缓存

支持在html中使用md语法

header 1 header 2
row 1 col 1 row 1 col 2
row 2 col 1 row 2 col 2
上一篇

2020年终总结