1、普通監(jiān)聽（無法監(jiān)聽到第一次綁定的變化）
這樣使用watch時有一個特點，就是當(dāng)值第一次綁定的時候，不會執(zhí)行監(jiān)聽函數(shù)，只有值發(fā)生改變才會執(zhí)行。
//當(dāng)text發(fā)生變化時觸發(fā)
watch: {
text(newVal, oldVal) {
console.log(newVal)
}
}
2、普通監(jiān)聽（可以監(jiān)聽到第一次綁定的變化）
給 text 綁定了一個handler方法，之前我們寫的 watch 方法其實默認(rèn)寫的就是這個handler，Vue.js會去處理這個邏輯，最終編譯出來其實就是這個handler。
設(shè)置immediate為true，可以在第一次綁定值的時候執(zhí)行監(jiān)聽函數(shù)，否則只有值改變的時候才會執(zhí)行。
watch: {
text: {
handler (newVal, oldVal) {
console.log(newVal)
},
immediate: true,
}
}3、深度監(jiān)聽（可以監(jiān)聽到對象內(nèi)屬性的變化）
設(shè)置deep: true 則可以監(jiān)聽到text.value的變化，此時會給text的所有屬性都加上這個監(jiān)聽器，當(dāng)對象屬性較多時，每個屬性值的變化都會執(zhí)行handler。文章來源：http://www.zghlxwxcb.cn/news/detail-610394.html
data (){
return {
text: {
value:'一一',
}
}
},
watch: {
text: {
handler(newVal, oldVal) {
console.log(newVal)
},
immediate: true,
deep: true,
}
}
如果只需要監(jiān)聽對象中的一個屬性值，則可以做以下優(yōu)化：文章來源地址http://www.zghlxwxcb.cn/news/detail-610394.html
watch: {
'text.value': {
handler(newVal, oldVal) {
console.log(newVal)
},
deep: true,
immediate: true
}
}
到了這里，關(guān)于watch監(jiān)聽器三種監(jiān)聽方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
