1.computed用来监控自己定义的变量，该变量不在data里声明，直接在computed里定义，然后就可以在页面上进行双向数据绑定展示出结果或做其他处理。
2.computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是说数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。（业务场景：购物车里面的商品列表和总金额的关系，只要商品列表里的商品数量发生变化，总金额都应该发生变化。）
与watch之间的区别：
1.watch主要用于监控vue实例的变化，它监控的变量必须在data里声明才可以，他可以监控一个变量，也可以是一个对象
data(){
return {
example0:"",
example1:"",
example2:{
inner0:1,
innner1:2
}
}
},
watch:{
example0(newVal,oldVal){//监控单个变量
……
}，
example2(newVal,oldVal){//监控对象
……
}，
}
2.watch一般用于监控路由、input输入框的值特殊处理，适合于一个数据影响多个数据
3.computed本质是一个惰性求值的观察者，具有缓存性，只有当依赖变化后，第一次访问computed属性，才会计算新的值，而watch则是当数据发生变化便会调用执行函数
4.从使用场景上说，computed使用一个数据别多个数据影响，而watch适用一个数据影响多个数据
在Vue中计算属性是基于它们的依赖进行缓存的，而方法是不会基于它们的依赖进行缓存的。从而使用计算属性要比方法性能更好。
为什么不用methods，methods得调用才生效,computed不需要调用 直接执行了,不用在mounted写一堆
watch监听传进来的值 computed监听自己得值
prop里的值相当于data ，computed里的值相当于data， computed不能和data重复， 也就是不能和prop重复 ，所以无法监听prop里的值 ，也就是传进来的值。
应用场景
一，作为过滤器使用
<span v-for="(item,index) in navList" :key="index" @click="type = index" :class="{'active':type===index}">{{item}}</span>
<li v-for="(item,index) in taskListfilter" :key="index">
</li>
data() {
return {
navList: ['全部', '实时单', '竞价单'],
type:0,
taskList:[]
}
},
computed: {
taskListfilter() {
switch (this.type) {
case 0:return this.taskList
case 1:return this.taskList.filter(item => item.type === '实时单')
case 2:return this.taskList.filter(item => item.type === '竞价单')
// default :return this.taskList
}
}
}
2，加载更多
<li v-for="(item,index) in addressListFilter" :class="{'check':checkIndex == index}" @click="checkIndex=index;selectedAddrId=item._id"></li>
<a @click="expand" v-bind:class="{'open':limit>3}">展开更多</a>
data(){
return {
addressList:[], // 地址列表
limit:3, // 限制默认显示3个地址
checkIndex:0
}
},
computed:{
addressListFilter(){
return this.addressList.slice(0,this.limit);
}
},
methods:{
expand(){ // 点击more更多
if(this.limit ==3){
this.limit = this.addressList.length;
}else{
this.limit =3;
}
}
}
}
