普通写法
<input type="text" v-model="value"/>
//监听 value值发生变化时触发
watch: {
value(newVal, oldVal) {
console.log(newVal) // 变化后最新的值
console.log(oldVal) // 变化前的值
}
}
缺点：当值第一次绑定的时候，不会执行监听函数
第二种写法
<input type="text" v-model="value"/>
watch: {
value: {
handler (newVal, oldVal) {
console.log(newVal) // 变化后最新的值
console.log(oldVal) // 变化前的值
},
immediate: true
}
}
或者
watch: {
value: {
handler (val) {
console.log(val) // 实时监听值
},
immediate: true
}
}
注意点：只有当值改变的时候 才会执行，如果想在第一次绑定的时候执行此监听函数 则需要 设置
immediate为true
深度监听
<input type="text" v-model="value"/>
//监听 value值发生变化时触发
watch: {
value: {
handler (val) {
console.log(val)
},
immediate: true,
deep: true
}
}
当要监听对象或数组的时候需要添加deep:true 属性。
