computed
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护，所以，对于任何复杂逻辑，你都应当使用计算属性
```<template>
<div>
<!-- computed -->
<!-- 虽然插值可以写简单的表达式,但是当面临多个,或者较为复杂的运算却不实用了 -->
<p>{{ 2 > 1 ? "Hello" : 'Word' }}</p>
<p>{{ 2 > 1 ? "Hello" : 'Word' }}</p>
<!-- <p>{{ if(2 > 1){ return 'Hello Word' } }}</p> 这样写不会生效 -->
<p style="backgroundColor:pink">{{ value }}</p>
<!-- methods里面的方法同样可以进行复杂计算,但是效率没有computed高,每次计算都会重新计算函数,而computed只会依赖上次的值 -->
<!-- watch侦听器则是每次的进行命令式的回调,没有缓存,所以也是没有computed好 -->
<!-- 计算属性的setter和getter -->
<input type="checkbox" v-model="sum">
<ul>
<li v-for="item in dataList" :key="item.id">
{{ item.name }}:
<input type="checkbox" v-model="item.done" >
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'IndexPage',
data(){
return {
title : 'HELLO WORD',
dataList : [
{ id : 1 , name : '派大星' , done : true},
{ id : 2 , name : '章鱼哥' , done : false},
{ id : 3 , name : '海绵宝宝' , done : true},
{ id : 4 , name : '珊迪' , done : false},
{ id : 5 , name : '蟹阿金' , done : true}
]
}
},
computed : {
value(){
return this.title.split('').reverse().join('')
},
sum : {
get(){
return this.dataList.every((item)=>{
return item.done
})
},
set(newValue){
this.dataList.forEach((item)=>{
item.done = newValue
})
}
}
}
}
</script>
<style>
input{
margin: 0;
padding: 0;
box-sizing: content-box;
}
</style>
