Vue.js实战第三章笔记

3.1什么是计算属性
所有的计算属性都以函数的形式写在 Vue 实例内的 computed 选项内，最终返回计算后的结果。

data:{
text:‘123,456’
},
computed:{
reversedText: function(){
return this.text.split(’,’),reverse().join(’,’);
}
}

3.1计算属性用法
每一个计算属性都包含一个 getter 和一个 setter，我们上面的两个示例都是计算属性的默认用法， 只是利用了 getter 来读取。在你需要时，也可以提供一个 setter 函数，当手动修改计算属性的值就像修改一个普通数据那样时，就会触发 setter 函数，执行一些自定义的操作
data:{
a:‘jack’,
b:‘Green’
},
computed:{
fullName:{
//getter用于读取
get: function(){
return this.a + ‘’+this.b;
}
//setter写入时触发
set: function(newValue){
var names = newValue.split(’,’);
this.a = names[0];
this.b = names[names.length-1];
}
}
}
绝大多数情况下，我们只会用默认的 getter方法来读取一个计算属性，在业务中很少用到setter, 所以在声明一个计算属性时，可以直接使用默认的写法，不必将 getter 和 setter 都声明

3.3计算属性缓存
methods:{
reversedText: function(){
return this.text.split(’,’),reverse().join(’,’);
}
}
methods里可以实现相同效果，
computed是基于他的依赖缓存，一个计算属性所依赖的数据发生变化时，它才会重新取值，text只要不改变，计算属性也就不更新