Vue 计算属性和侦听器（computed 与 watch）——Vue 学习笔记（四）

计算属性：

结果：

在上面的例子中我们声明了一个计算属性 reversedMsg 。

我们可以像绑定普通 property 一样在模板中绑定计算属性，Vue 知道 vm.reversedMsg 依赖于 vm.msg，因此当 vm.msg 发生改变时，所有依赖于 vm.reversedMsg 的绑定也会更新。

---

计算属性缓存 VS 方法

我们通过方法同样可以达到上面例子的效果。

不同的是：计算属性是基于它们的响应式依赖进行缓存的。只在相关依赖发生改变时，它们才会重新求值。这意味着只要 msg 没有发生改变，多次访问 reversedMsg 计算属性会立即返回之前的计算结果，而不必再次执行函数。相比之下，调用方法总会再次执行函数。

假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter。

如果不希望有缓存，可以使用方法来代替。

---

侦听器

侦听器允许我们在数据发生变化的时候，做出某些操作。

需要在数据变化时执行异步或开销较大的操作时，使用侦听器较好。

---

computed 和 watch 的异同

同：

都是对 Vue 实例上的数据进行观察和响应。

异：

（1）使用场景：computed 擅长处理一个数据受多个数据影响，watch 擅长处理一个数据影响多个数据。

（2）功能：computed 是计算属性，watch 是监听一个值的变化，并做出响应。

（3）异步：computed 不支持异步操作，其内部的异步操作是无效的，watch 支持异步。

（4）缓存：computed 支持缓存，watch 不支持。

（5）引用类型：computed 可以监听到引用类型的变化，watch 只会监听数据的值是否变化，而不会监听数据地址的改变，如果需要监听引用类型的数据变化，可以使用字符串形式监听：