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

计算属性 vs 方法

对于任何复杂逻辑,你都应当使用计算属性
计算属性是基于它们的响应式依赖进行缓存的
clipboard.png
这给例子中,计算属性的getter函数是没有反作用的,当咱们改变实例的message时,无论是调用method的函数仍是计算属性的getter函数,获得的结果都是同样的。可是,计算属性是基于它们的响应式依赖进行缓存的,计算属性缓存只要message没有改变,屡次访问reversedMessage会当即返回以前的计算结果,可是method总会再次执行函数。
假设咱们有一个性能开销比较大的计算属性 A,它须要遍历一个巨大的数组并作大量的计算。而后咱们可能有其余的计算属性依赖于 A 。若是没有缓存,咱们将不可避免的屡次执行 A 的 getter!若是你不但愿有缓存,请用方法来替代。数组

计算属性 vs 侦听属性

clipboard.png
clipboard.png
watch代码是命令式且重复的,计算属性的代码要简单的多缓存

计算属性的getter

clipboard.png

clipboard.png
setter函数的调用可让vm3.firstName和vm3.lastName相应地被更新异步

侦听器

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

相关文章
相关标签/搜索