vue2有三种watch(渲染watch,计算属性watch(computed),用户watch(也就是watch))
vue3有三种effect(渲染effect,计算属性effect(computed),用户effect(也就是watch))
computed:
每个计算属性内部维护一个dirty,第一次调用默认为true,存在一个变量this.value,随后将其设置为false,再次调用就不会执行
当依赖的属性值变化是就触发更新,把dirty设置为true,页面重新更新,重新获取最新的值
computed | watch | |
---|---|---|
缓存 | 有缓存,调用多次相同的只执行一次 | 无缓存,调用多少次就执行多少次 |
是否支持异步 | 否 | 是 |
如何选择 | 计算的值多次使用,某个数据导致这个值重新计算(一个值由多个数据组成) | 监听某个值变化进行函数调用(一个值影响多个数据) |
watch
vue3提供了onCleanup让用户更加方便使用和清理
总结:
1.computed可以做的,watch也可以做,反之不行
2.从使用场景上说,computed适用一个数据被多个数据影响,而watch适用于一个数据影响多个数据