Vue.js 计算属性

计算属性用于处理一些复杂逻辑时是很有用的

vue.js 内置了一些常用的计算属性

比如下面的范例使用计算属性反转字符串

下面的范例则利用计算属性反转字符串

上面的范例中, reversedMessage 是一个计算属性

vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新


computed vs methods

可以使用 方法 ( methods ) 来替代 计算属性 ( computed )

它们的效果是一样的,但是也有一些区别:

  1. computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值
  2. methods ,在重新渲染的时候,函数总会重新调用执行

从某些方面说,computed 性能会更好,但是如果不希望缓存,则可以使用 methods 属性


computed setter

computed 属性默认只有 getter

但我们也可以提供一个 setter

上面的范例中,当运行到

时,setter 会被调用, vm.name 和 vm.url 也会被对应更新


本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!