计算属性:
结果:
在上面的例子中我们声明了一个计算属性 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 只会监听数据的值是否变化,而不会监听数据地址的改变,如果需要监听引用类型的数据变化,可以使用字符串形式监听: