Vue2计算属性computed

2023-10-30

vue实例被创建,在触发beforeCreate之后,会做一些事情,其中就包括对computed的梳理

处理

vue会遍历computed配置的所有属性,为每一个属性创建一个watcher,并传入一个函数,传入的函数本质就是computed配置中的getter,这样一来,getter运行过程中就会收集依赖

在收集依赖的时候,不光会收集这个watcher,还会收集组件的watcher

为计算属性创建的watcher不会立即执行,是因为考虑到该属性是否被使用,如果没被使用,则不会执行,因此在创建watcher的时候使用了lazy属性

lazy属性可以使watcher不会立即执行,并且watcher内部会创建两个属性来实现缓存,value:保存watcher运行的结果,受lazy的影响最开始是undefined,dirty: 用于描述value是否为脏值,受lazy影响最开始为true

当读取计算属性时,vue会检查对应的watcher是否为脏值,如果是则运行函数,计算依赖,得到对应的值,保存在watcher的value中,并设置dirty为false,然后返回

当计算属性依赖发生变化的时候,只会触发计算属性的watcher,将dirty设置为true,当运行组件的watcher的时候会判断dirty,如果是脏值,则会重新计算,得到对应的值,保存在watcher的value中,并设置dirty为false,然后返回

setter

对于computed的setter,watcher设置监听时会直接调用computed的setter

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue2计算属性computed 的相关文章

随机推荐