计算属性
计算属性，定义为“方法”，定义到 computed 节点之下
在使用计算属性的时候，当普通的属性使用即可，不需要 “（）”
好处：
1. 实现了代码的复用
2. 只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值！
例：设定一个有大小的盒子，修改输入框中的rgb，会使得盒子跟着一起变色。
①未使用计算属性
style
.box {
width: 300px;
height: 200px;
border: 1px solid #ccc;
}
template
<div class="app">
<!-- 数字部分 -->
<div>
<span>R：</span>
<input type="text" v-model.number="r">
</div>
<div>
<span>G：</span>
<input type="text" v-model.number="g">
</div>
<div>
<span>B：</span>
<input type="text" v-model.number="b">
</div>
<hr>
<!-- 图块 -->
<div class="box" :style="{ backgroundColor: `rgb(${this.r}, ${this.g}, ${this.b})`}">
<p>这里的RGB值是：{{ `rgb(${this.r}, ${this.g}, ${this.b})`}}</p>
<button @click="show">单击按钮，在终端打印RGB的值</button>
</div>
</div>
script
data: {
r: 10,
g: 111,
b: 44
},
methods: {
// 点击按钮，在终端显示
show() {
// 以下两行等效，
// console.log(this.rgb)
console.log(`rgb(${this.r}, ${this.g}, ${this.b})`)
}
}
②改进为计算属性：
template更改
<!-- 图块 -->
<div class="box" :style="{ backgroundColor: rgb }">
<p>这里的RGB值是：{{ rgb }}</p>
</div>
script增加
computed: {
rgb() {
return `rgb(${this.r}, ${this.g}, ${this.b})`
}
}
很明显，使用计算属性后，大段的rgb(${this.r}, ${this.g}, ${this.b}变成了this.rgb，代码变得高效复用