模板内的表达式常用于简单的运算，当过长或逻辑复杂时，难以维护，计算属性就是解决该问题的
什么是计算属性
表达式如果过长，或逻辑更为复杂，就会变得臃肿甚至难以维护，比如：
<div>
{{ text.split('.').reverse().join('.') }}
</div>该表达式包含 3 个操作，并不是很清晰，可以用计算属性进行改写：
<div id="app">
{{ reverseText }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
text: '123,456'
},
computed: {
reverseText: function () {
//这里的 this 是当前的 Vue 实例
return this.text.split(',').reverse().join(',');
}
}
})
</script>所有的计算属性都以函数的形式写在 Vue 实例内的 computed 选项内，最终返回计算结果。
计算属性的用法
除了上例简单的用法，计算属性还可以依赖多个 Vue 实例的数据。只要其中任一数据变化，计算属性就会重新执行，视图也会更新。例如，下面的实例是在展示购物车内两个包裹的总价。
<div id="app">
{{ prices }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
package1: [
{
name: 'iphone xs max',
price: 9999,
count: 2
},
{
name: 'ipad pro',
price: 6666,
count: 2
}
],
package2: [
{
name: 'apple',
price: 20,
count: 20
},
{
name: 'orange',
price: 18,
count: 20
}
]
},
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 i = 0; i < this.package2.length; i++) {
prices += this.package2[i].price * this.package2[i].count;
}
return prices;
}
}
})
</script>当 package1 和 package2 中的商品有任何变化时，比如购买数量变化或增删商品时，计算属性 prices 就会自动更新，视图中的 prices 也会自动变化。
geter 和 setter
每一个计算属性都包含一个 getter 和一个 setter，上面的两个例子都是计算属性的默认用法，只是利用了 getter 来读取，在你需要时，也可以提供一个 setter 函数，当手动修改计算属性的值时就会触发 setter 函数，执行一些自定义操作，例如：
<div id="app">
{{ fullName }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
firstName: 'Jack',
lastName: 'Green'
},
computed: {
fullName: {
// getter, 用于读取
get: function () {
return this.firstName + ' ' + this.lastName;
},
// setter，写入时被触发
set: function (newValue) {
var names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
})
</script>当在浏览器的控制台执行 app.fullName = ‘John Doe‘; 时，setter 就会被调用，数据 firstName 和 lastName 都会相对更新，视图也会更新。
绝大多数情况下，我们只会用默认的 getter 方法来读取一个计算属性，在业务中很少用到 setter，因此在声明一个计算属性时，直接使用默认的方法即可，不必将 getter 和 setter 都声明。
计算属性除了上述简单的文本插值外，还经常用于动态地设置元素的样式名称 class 和内联样式 style。当使用组件时，计算属性也常用于动态传递 props。
计算属性还有两个很实用的小技巧：一个计算属性可以依赖其他的计算属性；二是计算属性不仅可以依赖当前 Vue 实例的数据，还可以依赖其他实例的数据。
计算属性缓存
在上一篇介绍指令和时间时，你可能发现调用 methods 里的方法也可以与计算属性起到同样的作用，比如本章第一个示例可以用 methods 改写为：
<div id="app">
{{ reverseText() }}
</div>
<script>
var app = new Vue({
<!-- 注意：这里的 reverseText 是方法，所以要带() -->
el: '#app',
data: {
text: '123,456'
},
methods: {
reverseText: function () {
//这里的 this 是当前的 Vue 实例
return this.text.split(',').reverse().join(',');
}
}
})
</script>没有使用计算属性，在 methods 里定义了一个方法实现了相同的效果，甚至该方法还可以接受参数，使用起来更灵活。那为什么还需要计算属性呢？原因就是计算属性是基于它的依赖缓存的，一个计算属性所依赖的的数据发生变化时，它才会重新取值，所以 text 只要不改变，计算属性也就不更新，例如：
computed: {
now: function() {
return Date.now();
}
}这里的 Dtae.now() 不是响应式依赖，所以计算属性 now 不会更新。但是 methods 则不同，只要重新渲染，它就会被调用，因此函数也会被执行。
使用计算属性还是 methods 取决于你是否需要缓存，当遍历大数组和大量计算时，应当使用计算属性，除非你不希望得到缓存。
原文地址：https://www.cnblogs.com/kindleheart/p/9983637.html