1.含义及用法
(1)在html模版中绑定数据时，如果需要的数据不是一个简单的数据，而是需要将一个或者多个数据计算之后得到的数据，这时候就需要用到计算属性
(2)使用方法：配置computed属性，它的值为对象，对象里面的键值对就是一个个计算属性，key就是计算属性的名称，值是一个函数，这个函数的返回值就是计算属性的值
var vm = new Vue({
el: \'#app\',
data: {
message: \'good!\'
},
computed: {
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split(\'\').reverse().join(\'\')
}
}
})
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>反转字符串: {{ reversedMessage }}</p>
</div>
渲染结果：
<div id="app">
<p>原始字符串: good!</p>
<p>反转字符串: !doog</p>
</div>
2. computed vs methods
(1)计算属性一般作为一个数据绑定在html模版中，而methods一般用于事件监听时调用，虽然methods也能达到计算属性一样的效果，但是语义还是有区别的
(2)computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
3.计算属性的get/set方法
(1)通常情况下计算属性的值默认是一个函数，即get方法。顾名思义，就是获取一个数据，而这个数据是根据所依赖的数据经过一番计算得到的。
(2)其实它还有一个方法，即set方法,通过给这个属性赋值来触发相关的回到函数执行，并在回调函数中操作其他的数据
使用方法：将某个计算属性的值设置为一个对象，然后为其设置get和set两个属性，get方法会返回一个数据，而set方法可以操作其他的数据
var vm = new Vue({
el:\'#app\',
data:{
num:20
},
computed:{
result:{
get:function(){
return this.num * 5;
},
set:function(value){
this.num = value / 5;
}
}
}
})
获取计算属性的值就是调用get方法，例如:
<!-- 20 * 5 = 100 -->
<p>{{result}}</p>
给计算属性赋值是调用set方法，例如:
<!-- 执行完毕后data中的num = 80 / 5 = 16 -->
<button @click="result=80">点我</button>
实例：
<body>
<div id="app">
<input type="text" v-model="num">
<span> * 5 = </span>
<input type="text" v-model="result">
</div>
</body>
<script>
var vm = new Vue({
el:\'#app\',
data:{
num:20
},
computed:{
result:{
get:function(){
return this.num * 5;
},
set:function(value){
this.num = value / 5;
}
}
}
})
</script>
无论修改左边还是右边的输入框的值，另一边的输入框都会自动计算成相应的值
4.计算属性的依赖监听
当计算属性的依赖项发生改变时，重新运行计算属性的值，但是所谓的依赖项是什么，仍需要进一步测试。
这里先说结论：只有vue实例内部的响应式数据改变时才能让计算属性重新运行得到最新的值，通俗的说，外部的变量，vue的data中数组元素直接赋值，只要是不能触发页面更新的数据，即使参与了计算属性的运算，也不会触发计算属性的更新。
这个例子既不会更新页面，也不会更新计算属性
<body>
<div id="app">
<h2>{{total}}</h2>
<p>{{list[0]}}</p>
</div>
</body>
</html>
<script>
var vm = new Vue({
el:\'#app\',
data:{
list:[1,2,3]
},
computed:{
total(){
return this.list[0]
}
},
created(){
setInterval(() => {
this.list[0]++
console.log(this.list[0])
}, 1000)
}
})
</script>
这个全局变量num能更新，但是计算属性不能
<script>
var num = 10
var vm = new Vue({
el:\'#app\',
data:{
},
computed:{
total(){
return num
}
},
created(){
setInterval(() => {
num++
console.log(num)
}, 1000)
}
})
</script>
下面的例子才会更新计算属性
(1)data中的属性值发生改变
<script>
var num = 10
var vm = new Vue({
el:\'#app\',
data:{
num:10
},
computed:{
total(){
return this.num
}
},
created(){
setInterval(() => {
this.num++
}, 1000)
}
})
</script>
(2)数组长度发生改变
<body>
<div id="app">
<!-- 这2个页面元素都能更新 -->
<h2>{{total}}</h2>
<h2>{{list.length}}</h2>
</div>
</body>
</html>
<script>
var num = 10
var vm = new Vue({
el:\'#app\',
data:{
list:[1,2,3,4]
},
computed:{
total(){
return this.list.length
}
},
created(){
setInterval(() => {
this.list.push(10)
}, 1000)
}
})
</script>
(3)通过调用方法更新数组元素
<script>
var num = 10
var vm = new Vue({
el:\'#app\',
data:{
list:[1,2,3,4]
},
computed:{
total(){
return this.list[0]
}
},
created(){
setInterval(() => {
var val = this.list[0] * 2
this.list.splice(0,1,val)
}, 1000)
}
})
</script>
(4)通过v-model改变数组长度
<body>
<div id="app">
<p>{{total}}</p>
<div><input type="checkbox" v-model="list" value="RA2">红警</div>
<div><input type="checkbox" v-model="list" value="LOL">英雄联盟</div>
<div><input type="checkbox" v-model="list" value="Meteor">流星蝴蝶剑</div>
</div>
</body>
</html>
<script>
var num = 10
var vm = new Vue({
el:\'#app\',
data:{
list:[]
},
computed:{
total(){
return this.list.length
}
},
})
</script>
(5)通过v-model改变数组元素
<body>
<div id="app">
<p>{{total}}</p>
<div v-for="item in list" :key="item.val">
<input type="checkbox" v-model="item.checked" :value="item.val" >{{item.name}}
</div>
</div>
</body>
</html>
<script>
var num = 10
var vm = new Vue({
el:\'#app\',
data:{
list:[
{name:\'红警\',val:\'Ra2\',checked:true},
{name:\'英雄联盟\',val:\'LOL\',checked:false},
{name:\'流星蝴蝶剑警\',val:\'Meteor\',checked:true}
]
},
computed:{
total(){
var arr = this.list.filter((item)=>{
return item.checked
})
return arr.length
}
},
})
</script>
5.实例 全选/反选
在多选的总开关上使用计算属性，当子复选框发生改变时，触发其get方法，更新其值。当其本身发生改变时，触发其set方法，重置其他复选框的选中状态
<body>
<div id="app">
<div class="head">
<input type="checkbox" v-model="total">全选/反选
</div>
<div class="box">
<div class="item" v-for="item in list" :key="item.val">
<input type="checkbox" v-model="item.checked" :value="item.val" >{{item.name}}
</div>
</div>
</div>
</body>
</html>
<script>
var num = 10
var vm = new Vue({
el:\'#app\',
data:{
list:[
{name:\'红警\',val:\'Ra2\',checked:true},
{name:\'英雄联盟\',val:\'LOL\',checked:false},
{name:\'流星蝴蝶剑剑\',val:\'Meteor\',checked:true},
{name:\'刺激战场\',val:\'chiji\',checked:false},
{name:\'亡者农药\',val:\'wangzhe\',checked:true}
]
},
computed:{
total:{
get(){
return this.list.every(item =>{
return item.checked
})
},
set(val){
//将数组所有元素的checked属性重置
for(key in this.list){
this.list[key].checked = val
}
}
}
},
})
</script>
6.多组复选框多层次联动
计算属性的get方法一般返回值是一个简单的数据类型（字符串，数字，布尔值），计算属性通过vue的一些数据绑定指令将其绑定到页面元素中。例如前面的例子中，使用v-model将其绑定到复选框上面，点击复选框可触发其set方法。
但实际上计算属性的get方法还可以返回一个对象类型的值，当页面中有多组复选框时，为其添加多个属性，把每个属性绑定给每组复选框的 全选/反选 按钮中，当子项复选框发生改变时，触发计算属性的get方式，即可更新计算属性的返回值，从而更新 全选/反选 状态。
但是用户手动点击 全选/反选 框时，不会触发计算属性的set方法，如果想做双层 全选/反选 联动，光有计算属性是不够的。只有给计算属性本身赋值才能触发其set方法，给他的属性赋值却不会。而我们又不可能为每个分组单独制定一个计算属性，因为复选框分组数量是不确定的，所以不可能提前定义好相同数量的计算属性。
计算属性的依赖监听可以在子复选框想改变时更新 全选/反选 框的状态，却不能在用户主动改变 全选/反选 框状态时更新其子复选框的状态。为了弥补这个缺陷，可以为 全选/反选 框 添加事件监听，在回调函数中更新子复选框的状态