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方法。因此,在以上代碼中,我們成功地監聽了動態生成的屬性變化。