欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

vue watch深層更新

錢諍諍2年前8瀏覽0評論

Vue的watch屬性可以用來監聽數據變化,當數據變化時可以觸發一個回調函數來執行相關操作。在Vue中,當我們監聽某個對象的某個屬性時,如果這個屬性被改變了,我們可以通過設置deep屬性來指定是否需要深層更新。如果我們不設置deep屬性,則只會監聽到對象的引用變化,而無法監聽到內部屬性的變化,導致我們的vue實例無法重新渲染。

watch: {
obj: {
handler: 'updateObj',
deep: true
}
},
methods: {
updateObj () {
// ...
}
}

通過上述代碼,我們監聽了一個名為obj的對象,當obj對象發生變化時,就會執行一個名稱為updateObj的方法,而且這個監聽不僅僅會監聽obj本身的變化,還會監聽obj內任意屬性的變化。這里的deep屬性要特別注意,如果我們不設置它,vue就無法深層監聽對象屬性變化,導致組件無法響應式更新。

那么,當我們需要監聽一個數組內部對象的屬性變化時該怎么辦呢?可以通過設置immediate屬性來解決問題。immediate為true的時候,表示會在這個監聽器初始化時先執行一次回調函數,這樣就可以監聽到數組內部對象的變化了。

watch: {
'arr[0].prop': {
handler: 'updateArr',
immediate: true
}
},
methods: {
updateArr () {
// ...
}
}

在上面的代碼中,我們監聽了arr數組的第一個元素的prop屬性,當prop屬性變化時,會執行一個名為updateArr的方法。在這里,我們設置了immediate屬性為true,這樣就能監聽到數組的內部變化。

最后,當我們要監聽一個動態生成的對象屬性時,需要使用Vue.set或者this.$set方法來為對象添加屬性。因為Vue無法檢測到新添加的屬性,只有使用Vue.set或者this.$set方法才能讓新屬性被監聽到。

methods: {
addProp () {
this.$set(obj, 'newProp', 'new')
}
},
watch: {
'obj.newProp': {
handler: 'updateObj',
immediate: true
}
},
updateObj () {
// ...
}

在這里,我們首先使用this.$set方法,為obj對象添加了一個名為newProp的屬性,然后我們監聽newProp屬性的變化,當它變化時,會執行updateObj方法。因此,在以上代碼中,我們成功地監聽了動態生成的屬性變化。