计算属性
在Vue中,模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
对于任何复杂逻辑,使用计算属性是个比较好的选择。
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作属性 vm.reversedMessage 的 方法 函数:
你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message,因此当 vm.message 发生改变时,所有依赖 vm.reversedMessage 的绑定也会更新。
方法
我们可以通过在表达式中调用方法来达到同样的效果:
<p>Reversed message: "{{ reversedMessage() }}"</p>
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果是完全相同的。
区别
那么两种方式有什么区别呢
计算属性是基于它们的响应式依赖进行缓存的,也就是说,当它所依赖的属性值没有发生改变时,再次调用该计算属性,得到的是上一次计算属性的缓存,计算属性中的方法没有再次执行。
方法调用时,每次都重新进行求值,相比于计算属性更耗性能
以下两个例子可以侧面印证这一点
计算属性:
<div id="app">
<p>{{ getdate }}</p>
<!-- 运行结果--Thu Jan 02 2020 20:54:35 GMT+0800 (中国标准时间) -->
</div>
let vm = new Vue({
el: '#app',
data: {},
computed: {
getdate() {
return new Date()
}
}
})
方法:
<div id="app2">
<p>{{ getdate() }}</p>
<!-- 运行结果--Thu Jan 02 2020 20:54:35 GMT+0800 (中国标准时间) -->
</div>
let vm1 = new Vue({
el: '#app2',
data: {},
methods: {
getdate() {
return new Date()
}
}
})
表面上看,这两种方式的执行结果根本没有区别,但是,我们打开浏览器的控制台,分别输入vm.getdate和vm1.getdate()
vm.getdate输出的是第一次执行后的时间,而vm1.getdate()输出的是再次调用时候的时间。vm.getdate被调用的时候没有执行,而vm1.getdate()被再次执行了,如果我们要多次调用一个属性,这时候计算属性比起方法,在性能上的优势就显而易见了