计算机属性
模板内的表达式是非常便利的,但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。例如:
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在模板中放入逻辑会影响加载速度,使得模板不再简单和清晰,对于任何复杂逻辑,你都应当使用计算属性
例子
HTML代码:
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
JavaScript代码:
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
//声明了一个计算属性 reversedMessage
reversedMessage: function () {
// 这里的this指向vue实例本身
return this.message.split('').reverse().join('')
}
}
})
结果:
Original message: “Hello”
Computed reversed message: “olleH”
vm.reversedMessage 的值始终取决于 vm.message 的值。
vm.reversedMessage 依赖于 vm.message ,因此当 vm.message 发生改变时,所有依赖于 vm.reversedMessage 的绑定也会更新。
计算属性与method的比较
上面的功能我们通过method也可以实现
<p>Reversed message: "{{ reversedMessage() }}"</p>
//定义为一个 method
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
我们可以将同一函数定义为一个 method 而不是一个计算属性。
两种方式结果是相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。
这也同样意味着下面的计算属性将不再更新,因为 Date.now() 不是响应式依赖:
computed: {
now: function () {
return Date.now()
}
}
两种方式在缓存上也大有不同,利用computed计算属性是将 reverseMessage与message绑定,只有当message发生变化时才会触发reverseMessage,而methods方式是每次进入页面都要执行该方法,但是在利用实时信息时,比如显示当前进入页面的时间,必须用methods方式