【Vue .js 计算属性和侦听器】vue.js看着官方文档的从0开始瞎摸学习

计算属性 vs 方法

对于任何复杂逻辑,你都应当使用计算属性
计算属性是基于它们的响应式依赖进行缓存的
《【Vue .js 计算属性和侦听器】vue.js看着官方文档的从0开始瞎摸学习》
这给例子中,计算属性的getter函数是没有副作用的,当我们改变实例的message时,不管是调用method的函数还是计算属性的getter函数,得到的结果都是一样的。但是,计算属性是基于它们的响应式依赖进行缓存的,计算属性缓存只要message没有改变,多次访问reversedMessage会立即返回之前的计算结果,但是method总会再次执行函数。
假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。

计算属性 vs 侦听属性

《【Vue .js 计算属性和侦听器】vue.js看着官方文档的从0开始瞎摸学习》
《【Vue .js 计算属性和侦听器】vue.js看着官方文档的从0开始瞎摸学习》
watch代码是命令式且重复的,计算属性的代码要简单的多

计算属性的getter

《【Vue .js 计算属性和侦听器】vue.js看着官方文档的从0开始瞎摸学习》

《【Vue .js 计算属性和侦听器】vue.js看着官方文档的从0开始瞎摸学习》
setter函数的调用可以让vm3.firstName和vm3.lastName相应地被更新

侦听器

虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

    原文作者:Kayee_呀
    原文地址: https://segmentfault.com/a/1190000019701156
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞