vue之watch监听对象,以及watch内调用methods方法
直接通过watch监听对象,对象的属性值变化并不会触发这个监听,所以通过属性deep:true,可以深入监听,data:{return {myObj:{name: 'lily',age: 12}}},watch: {myObj: {handler: (val, olVal) => {
·
直接通过watch监听对象,对象的属性值变化并不会触发这个监听,所以通过属性deep:true,可以深入监听,
data:{
return {
myObj:{
name: 'lily',
age: 12
}
}
},
watch: {
myObj: {
handler: (val, olVal) => {
console.log('我变化了', val, olVal)//但是val和olVal值一样
},
deep: true
}
},
这里我们会发现,虽然方法执行到了,但是监听到的旧值和新值是一样的,所以这里我们用computed和watch一起使用
data:{
return {
myObj:{
a: '对象a',
b: '对象b'
}
}
},
watch: {
myObjNew: {
handler: (val, olVal) => {
console.log('我变化了', val, olVal)
},
deep: true
}
},
computed: {
myObjNew() {
return JSON.parse(JSON.stringify(this.myObj))
}
}
watch内调用methods方法:
如果想要在watch里面调用methods里的方法,就不能这么写了,不能用箭头函数,watch需改成
watch: {
myObjNew: {
handler (val, olVal) {
console.log('我变化了', val, olVal)//但是val和olVal值一样
this.getList()
},
deep: true
}
},
methods:{
getList(){
console.log(this.myObjNew)
}
}
```
更多推荐
已为社区贡献14条内容
所有评论(0)