watch浅监听:监听基本数据类型
<div id="app">
<input type="text" v-model="msg">
</div>
new Vue({
el: '#app',
data: {
msg: '',
},
watch: {
// 语法
// 要监听的数据:监听函数(默认接受两个参数)
msg(newV, oldV) {
console.log(newV, oldV);
}
}
})
watch深监听:监度听复杂数据类型
<div id="app">
<input type="text" v-model="obj.num">
</div>
new Vue({
el: '#app',
data: {
obj: {
num: 1,
}
},
watch: {
// 对象类型无法使用浅监听
obj: {
handler(newv) {
console.log(newv);
},
deep: true, //深度监听
}
},
})