1.计算属性：computed
作用
- 减少模板中的计算逻辑
- 进行数据缓存
- 依赖固定的数据类型
使用
- 在
computed属性对象中定义计算属性的方法 - 在页面中使用{{方法名}}来显示计算的结果
- 通过
getter/setter实现对属性数据的显示和监视
注意点
- 计算属性是基于它们的依赖进行缓存的，只有相关的依赖发生改变时才会重新求值。只要相关的依赖未改变，只会返回之前的结果，不会执行函数。
computed依赖监控自己定义的变量，computed不能计算已经在data里面定义过的值，该变量在computed里面定义，然后可以在页面上进行数据绑定。computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。
export default {
data(){
return {
firstName:'',
lastName:'',
}
},
computed:{
fullName:{
get(){
return this.firstName + '·' + this.lastName
},
set(val){ //监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据
const names=val.split(' ');
this.firstName=names[0];
this.lastName=names[1]
}
}
}
}
使用场景
computed擅长处理的场景：一个数据受多个数据影响。
2.侦听器：watch
作用
- 主要用于监控
vue实例的变化，监控的变量必须在data里面声明才可以。 - 可以监控一个变量或者一个对象，但是只能监控整个对象或单个变量。
watch不能双向的绑定值。
监听简单数据类型
data:{
return{
firstName: '',
lastName: '',
fullName:''
}
},
watch:{
// 监听firstName
firstName(value){
console.log(`watch监视到firstName发生改变：${value}`);
//更新fullName
this.fullName = value + '·' + this.lastName
},
// 监听lastName
lastName(value){
console.log(`watch监视到lastName发生改变：${value}`);
this.fullName = this.firstName + '·' + value
}
}
监听复杂数据类型
data(){
return{
'first':{
second:0
}
}
},
watch:{
'first.second':{
handler(oldVal,newVal){
console.log(oldVal)
console.log(newVal)
},
deep:true
}
},
-
console.log打印的结果,发现oldVal和newVal值是一样的,所以深度监听虽然可以监听到对象的变化,但是无法监听到具体对象里面那个属性的变化。 -
oldVal和newVal值一样的原因是它们索引同一个对象/数组。Vue不会保留修改之前值的副本。 -
深度监听对应的函数名必须为
handler,否则无效果,因为watcher里面对应的是对handler的调用 -
watcher函数不能是箭头函数，官网的解释是箭头函数绑定了父级作用域上下文，会使this不能按照期望指向Vue实例。
使用场景
watch一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据。
3.总结
- 能用
computed的地方，尽可能使用computed。 computed是计算一个新的属性，并将该属性挂载到vm上，而watch是监听已经存在且已挂载VM上的数据，所以用watch同样可以监听computed计算属性的变化。- 使用方式上 计算属性是依据响应式属性得出的计算属性，使用时需要调用，且不加（），会缓存数据，在响应式属性更新时，计算属性也更新。 侦听器不需要调用，会在侦听属性发生变化时，自动调用。
- 从使用场景上说，
computed使用一个数据被多个数据影响，而`watch适用一个数据影响多个数据。 - 计算属性必须
return一个结果，也就是处理后的计算属性的值。而侦听器则不需要。
