分类解析vue中watch的用法:
1)数据类型
2)deep immediate
** 1. 普通数据类型:**
<input type="text" v-model="userName"/>
watch: {
userName (newName, oldName) {
console.log(newName)
}
}
watch: {
userName: {
handler (newName, oldName) {
console.log(newName)
},
immediate: true
}
}
缺点:
只有一个缺点 就是当值第一次绑定的时候 不会执行监听函数,只有当值改变的时候 才会执行
如果我们想在第一次绑定的时候执行此监听函数 则需要 设置 ** immediate为true**
** 2. 对象类型:**
当需要监听对象的改变时,此时就需要设置deep为true
第三种
<input type="text" v-model="cityName.name" />
data (){
return {
cityName: {name:'北京'}
}
},
watch: {
cityName: {
handler(newName, oldName) {
console.log(newName)
},
immediate: true,
deep: true
}
}
注意点:如果对象的属性较多,可以之监听某一个属性 'cityName.name':
** 3. 数组类型:**
数组的变化不需要深度监听
**注意点:**
在watch中不要使用箭头函数,因为箭头函数中的this是指向当前作用域