Vue计算属性vs方法

计算属性

在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()被再次执行了，如果我们要多次调用一个属性，这时候计算属性比起方法，在性能上的优势就显而易见了

• 点赞
• 收藏
• 分享
• 文章举报