溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“怎么使用Vue watch偵聽對象屬性”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
Vue 的 watch 偵聽器格式有兩種：方法格式和對象格式的偵聽器。
方法格式的偵聽器只能監聽簡單數據類型，如：Number、String、… 無法監聽對象屬性的變化，也不能在進入頁面時，自動觸發；
對象格式的偵聽器可以監聽對象屬性的變化。在一定條件下，載入頁面時，也可監聽數據變化；
1.鍵名分割，監聽對象的某一個屬性變化；
屬性名通過 . 與對象分割，并通過引號包裹，可以監聽對象的某一個屬性
data() {
return {
obj:{
name:'andy',
age:18
}}},
watch:{
'obj.name'(newval.oldval) {
// 代碼實現
}
}2.computed + watch，監聽對象的某一個屬性變化；
computed:{
ageVal() {
return this.obj.age;
}
}
watch:{
ageVal(newval,oldval) {
// 代碼實現
}
}3.deep 深度監聽，監聽對象的所有屬性變化；
deep：true 開啟深度監聽，任意屬性的屬性值變化，都會觸發 deep 深度監聽；
deep 深度監聽只能獲取到最新值；
不推薦 deep 深度監聽，容易造成頁面卡頓，因為deep 深度偵聽需要遍歷被偵聽對象中的所有嵌套的屬性；
obj:{
handler(val) {
// 代碼實現 val 值是 obj 整個對象
},
deep:true // deep 為 true 時，開啟深度監聽
// immediate:false 當immediate 值為 true 時，剛載入頁面時，也可監聽數據的變化
}“怎么使用Vue watch偵聽對象屬性”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
