个人对于vue2计算属性的理解

当某个变量的值需要用到其他变量计算才能得到的时候，这时才会用上计算属性(computed)。

简单写法

data(){return {a:10,b:5}}
computed:{
num(){return this.a+this.b}
}

num为15

完整写法

data(){return {a:10,b:5}}
computed:{
num:{
set(val){},
// 这个set，只有在num被赋值的时候才会触发
// val是num被赋予的新值
get(){return this.a+this.b}
// get只有在使用num的时候才会被触发
}
}

num为15

个人感觉计算属性的用法与在data里定义的普通变量的用法没什么不一样，只有定义的时候计算属性定义的方法不太一样。用起来都是this.xx，在标签上用也都是{{xx}}。

计算属性的缓存机制是：

计算属性对应的函数执行后，会把return 的结果缓存起来，

当依赖项不变时，多次调用都是从缓存里取值

当依赖项变化时，才会重新开始计算，并缓存新的值

这里的依赖项是指变量

<button @click='A++'>点击则让A+1</button>
data(){
return{A:6,B:5}}
computed:{
num:{
set(){},
get(){return this.A+this.B}
}
}

未点击按钮时num为11，当点击按钮后num会+1

在get里的所有变量只要发生变化，计算属性就会重新计算一次。不管是复杂数据类型还是简单数据类型都会重新计算。计算属性发生变化时，视图也会一起更新。