计算属性
- 作用
1）减少模版中的计算逻辑
2）进行数据缓存
3）依赖固定的数据类型（响应式数据）
- 使用
1）在computed属性对象中定义计算属性的方法
2）在页面中使用{{方法名}}来显示计算的结果
3）通过getter/setter实现对属性数据的显示和监视
- demo
fullName: {
get(){
return this.firstName + '·' + this.lastName;
},
set(value){
let names = value.split('·');
this.firstName = names[0];
this.lastName = names[1];
}
}
侦听器
- 作用
1）比computed更加灵活
2）watch中可以执行任何逻辑，比如：函数节流、Ajax异步数据获取、甚至操作DOM
3） 依赖固定的数据类型（响应式数据）
- 使用
1）通过通过vm对象的$watch()或watch配置来监视指定的属性
2）当属性变化时, 回调函数自动调用, 在函数内部进行计算
- demo
watch: {
// 监听firstName
firstName(value){
this.fullName = value + '·' + this.lastName;
},
// 监听lastName
lastName(value){
this.fullName = this.firstName + '·' + value;
}
}
总结
1）computed能做的，watch都能做，反之则不行
2）能用computed的地方，尽可能使用computed
3）computed 是计算一个新的属性，并将该属性挂载到 vm（Vue 实例）上，而 watch 是监听已经存在且已挂载到 vm 上的数据，所以用 watch 同样可以监听 computed 计算属性的变化（其它还有 data、props）
4）computed 本质是一个惰性求值的观察者，具有缓存性，只有当依赖变化后，第一次访问 computed 属性，才会计算新的值，而watch 则是当数据发生变化便会调用执行函数
5）从使用场景上说，computed 适用一个数据被多个数据影响，而watch 适用一个数据影响多个数据
摘自撩课学院Vue.js教学课堂笔记
