模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。
1. 计算属性的用法
所有的计算属性都以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果。
计算属性的常见用法是自动监听数据变化，其可以依赖多个Vue实例的数据，只要其中一个数据发生变化，计算属性就会重新执行，视图也会更新：
<!-- 计算属性用法 -->
<body>
<div id="app">
总价： {{prices}}
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
package1: [
{
name: "iPhone7",
price: 7199,
count:2
},
{
name: "iPad",
price: 2888,
count: 1
}
],
package2: [
{
name: "apple",
price: 3,
count: 5
},
{
name: "banana",
price: 2,
count: 10
}
]
},
computed: {
prices: function() {
var prices = 0;
for (var i = 0; i < this.package1.length; ++i) {
prices += this.package1[i].price * this.package1[i].count;
}
for (var j = 0; j < this.package2.length; ++j) {
prices += this.package2[j].price * this.package2[j].count;
}
return prices;
}
}
})
</script>
</body>
事实上每一个计算属性都包含一个getter和一个setter，上面的示例只是利用getter来读取。在需要时，也可以提供一个setter函数，以执行一些自定义的操作。
除了上述简单的应用计算属性进行文本插值外，其还常用于动态设置元素的样式名称class和内联样式style；
另外在使用组件时，计算属性也经常用来动态传递props；
此外，计算属性可以依赖其他计算属性，并且其不仅可以依赖当前Vue实例的数据，还可以依赖其他实例的数据。
2. 计算属性缓存
事实上，我们可以通过在表达式中调用methods方法来达到计算属性的同样效果。
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要传入值还没有发生改变，多次访问返回值计算属性会立即返回之前的计算结果，而不必再次执行函数。
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
使用计算属性还是methods取决于你是否需要缓存，如当遍历大数组和做大量计算时，应当使用计算属性。
参考
- 《Vue.js实战》
网友评论