普通寫法
<input type="text" v-model="value"/>
//監(jiān)聽 value值發(fā)生變化時(shí)觸發(fā)
watch: {
value(newVal, oldVal) {
console.log(newVal) // 變化后最新的值
console.log(oldVal) // 變化前的值
}
}
缺點(diǎn)：當(dāng)值第一次綁定的時(shí)候颓遏，不會(huì)執(zhí)行監(jiān)聽函數(shù)
第二種寫法
<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) // 實(shí)時(shí)監(jiān)聽值
},
immediate: true
}
}
注意點(diǎn)：只有當(dāng)值改變的時(shí)候 才會(huì)執(zhí)行滞时，如果想在第一次綁定的時(shí)候執(zhí)行此監(jiān)聽函數(shù) 則需要 設(shè)置
immediate為true
深度監(jiān)聽
<input type="text" v-model="value"/>
//監(jiān)聽 value值發(fā)生變化時(shí)觸發(fā)
watch: {
value: {
handler (val) {
console.log(val)
},
immediate: true,
deep: true
}
}
當(dāng)要監(jiān)聽對(duì)象或數(shù)組的時(shí)候需要添加deep:true 屬性漂洋。
