vue中watch和computed的分析
在某些场景中watch和computed有相同的用处,下面来详细说明其异同之处。
先来说说computed属性:
computed是一个计算属性,类似于filter过滤属性,对绑定到view上的数据进行处理并响应。
computed的用法:
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
diyText: function () {
return this.firstName + ' ' + this.lastName
}
}
diyText不能在data中定义,否则会报错:
因为如果在data中定义了,就不能在computed中重新定义和赋值。
computed是通过Object.defineProperty
来劫持各个属性的getter和setter,在数据变动时发布消息给订阅者,触发相应的监听回调。
get和set用法:
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName:{
get(){//回调函数 当需要读取当前属性值是执行,根据相关数据计算并返回当前属性的值
return this.firstName + ' ' + this.lastName
},
set(val){//监视当前属性值的变化,当属性值发生变化时执行,更新相关的属性数据
//val就是fullName的最新属性值
console.log(val)
const names = val.split(' ');
console.log(names)
this.firstName = names[0];
this.lastName = names[1];
}
}
}
接下来说说watch属性:
watch是一个观察的动作,只要哪个属性或值发生变化,就会触发相应的监听回调函数。
watch的用法:
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
监听firstName和lastName的变化,如果是复杂的数据结构就需要用到深度监听。
示例:
data(){
return{
'first':{
second:0
}
}
},
watch:{
secondChange:{
handler(oldVal,newVal){
console.log(oldVal)
console.log(newVal)
},
deep:true
}
}
打印的结果,发现oldVal和newVal值是一样的,原因是它们索引同一个对象/数组,所以深度监听虽然可以监听到对象的变化,但是无法监听到具体对象里面那个属性的变化。
深度监听对应的函数名必须为handler,否则无效果,因为watcher里面对应的是对handler的调用
computed和watch的区别: