Vue中的 computed 和 watch的区别

computed

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

我们为什么需要缓存?假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。

watch

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。

计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter;

watch有两个选项,deep和immediate

两者的区别

computed: 适用于重新计算比较费时不用重复数据计算的环境。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。如果一个数据依赖于其他数据,那么把这个数据设计为computed

watch: 如果你需要在某个数据变化时做一些事情,使用watch来观察这个数据变化