Vue Watch
watch内可以监听data的变化,watch的定义方式如下
{[key: string]: string | Function | Object }
//data内数据为:
data() {
showModal: true,
a:{
name: 'Jack',
height: 180
},
b: 'hellow world',
c: 123
},
//在watch中,键是要监听的数据:
watch: {
b: 'doSomething',
//或者 a.name必须要用字符串
'a.name': {
//doSomething
},
//
a: {},
//值可以是一个函数,但不能是箭头函数;第一个参数为监听的数据的变化后的值,第二个为变化之前的值;当只有一个参数时参数为数据变化后的值
showmodal: function(newVal, oldVal) {
//doSomething
},
//或者
showModal(newVal) {
if (newVal) {
console.log('1')
} else {
console.log('0')
}
},
//值可以是一个字符串,这个字符串是方法名
b: 'doSomething',
//值可以是一个对象,其中可以包含一些函数和其他选项,比如是否要深度遍历:
'a.name': {
handler(newVal, oldval) {
console.log('2')
},
deep: true
}
},
methods: {
doSomething() {
//
}
}
总结:
1.watch
的两个参数很重要。
2.定义函数的三个方法:
1.对象,对象内可包含函数以及例如deep: true的选项;
2.直接定义一个函数操作;
3.定义一个字符串,该字符串为一个方法名;
常用:
data:{
a:1,
b:{
c:1
}
},
watch:{
a(val, oldVal){//普通的watch监听
console.log("a: "+val, oldVal);
},
b:{//深度监听,可监听到对象、数组的变化
handler(val, oldVal){
console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的
},
deep:true
}
}
3.如果要观察data
下一个对象的属性,要使用'obj.key'
的方式,加引号。
4.如果要观察一个对象的变化,要使用deep: true
,否则监听不到变化。