8.computed和watch的区别

46 阅读1分钟

vue2有三种watch(渲染watch,计算属性watch(computed),用户watch(也就是watch))

vue3有三种effect(渲染effect,计算属性effect(computed),用户effect(也就是watch))

computed:

每个计算属性内部维护一个dirty第一次调用默认为true存在一个变量this.value,随后将其设置为false再次调用就不会执行

当依赖的属性值变化是就触发更新,把dirty设置为true,页面重新更新,重新获取最新的值

computedwatch
缓存有缓存,调用多次相同的只执行一次无缓存,调用多少次就执行多少次
是否支持异步
如何选择计算的值多次使用,某个数据导致这个值重新计算(一个值由多个数据组成)监听某个值变化进行函数调用(一个值影响多个数据)

watch

vue3提供了onCleanup让用户更加方便使用和清理

image.png

总结:

1.computed可以做的,watch也可以做,反之不行

2.从使用场景上说,computed适用一个数据被多个数据影响,而watch适用于一个数据影响多个数据