Vue的计算属性，一看就会

「这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战」

有时候我们可能需要在{{}}里添加一些需要计算再展示出来数据 例如：在页面中展示学生的成绩总分和平均分：

<div id="app">
	<table border="1">
		<thead>
			<th>学科</th>
			<th>分数</th>
		</thead>
		<tbody>
			<tr>
				<td>数学</td>
				<td><input type="text" v-model="Math"></td>
			</tr>
			<tr>
				<td>英语</td>
				<td><input type="text" v-model="English"></td>
			</tr>
			<tr>
				<td>化学</td>
				<td><input type="text" v-model="chemistry"></td>
			</tr>
			<tr>
				<td>总分</td>
				<td>{{Math + English + chemistry}}</td>
			</tr>
			<tr>
				<td>平均分</td>
				<td>{{(Math + English + chemistry)/3}}</td>
			</tr>
		</tbody>
	</table>
</div>

new Vue({
	el:'#app',
	data:{
		Math:88,
		English:77,
		chemistry:99,
	}
})

以上是通过在{{}}里运算，得出总分和平均分 虽然也能解决问题，但是特别不清晰，特别是当运算比较复杂的时候 那怎么办呢？ 了解一点的，应该会想到methods， 没错，确实methods也可以！但事实上，vue给我们提供了一个更好的解决方案叫计算属性 计算属性是vue实例中的一个配置选项：computed 通常里面都是一个个计算相关的函数，函数里头可以写大量的逻辑，最后返回计算出来的值 即我们可以把这些计算的过程写到一个计算属性中去，然后让它动态的计算。

<div class="app">
	<table border="1">
		<thead>
			<th>学科</th>
			<th>成绩</th>
		</thead>
		<tbody>
			<tr>
				<td>数学</td>
				<td><input type="text" v-model.number="Math"></td>
			</tr>
			<tr>
				<td>英语</td>
				<td><input type="text" v-model.number="English"></td>
			</tr>
			<tr>
				<td>化学</td>
				<td><input type="text" v-model.number="chemistry"></td>
			</tr>
			<tr>
				<td>总分</td>
				<td>{{sum}}</td>
			</tr>
			<tr>
				<td>平均分</td>
				<td>{{average}}</td>
			</tr>

		</tbody>
	</table>
</div>

var vm = new Vue({
	el:'.app',
	data:{
		Math:88,
		English: 77,
		chemistry:99,
	},
	computed:{
		sum:function(){
			return this.Math+ this.English+this.chemistry;
		},
		average:function(){
			return Math.round(this.sum/3);
		}
	}
});

如上， 计算属性一般就是用来通过其他的数据算出一个新数据，而且它有一个好处就是，它把新的数据缓存下来了，当其他的依赖数据没有发生改变，它调用的是缓存的数据，这就极大的提高了我们程序的性能。而如果写在methods里，数据根本没有缓存的概念，所以每次都会重新计算。这也是为什么这里我们没用methods的原因

以上就是Vue的计算属性的基本用法!