Vue watch 監聽物件中的屬性

2022-05-05 17:12:08 字數 645 閱讀 8042

vue 提供了乙個 watch 方法讓使用者監聽 data 內的資料變動,觸發相應的方法

querydata: ,
注: 下面 watch 後的函式上都可以拿到 新值和老值  

function(val, oldval)
現在需要監聽這個 querydata,我們可以這樣做:

watch: ,

deep: true

}}

裡面的deep設為了 true,這樣的話,如果修改了這個querydata中的任何乙個屬性,都會執行handler這個方法。不過其實這樣開銷是蠻大的,尤其是物件裡面結構巢狀過深的時候。而且有時候我們就想監聽這個物件中的某個屬性,比如name,這個時候可以這樣

watch: ,

}}

也可以這樣寫

watch: ,

}

或者通過巧用 computed 計算屬性

computed: 

}watch: ,

}// getname: function() ,

}

vue watch監聽物件及對應值的變化

var vm new vue watch b deep true vm.a 2 vm.b.c 2 a是乙個普通的值,當a的值變化時會被監聽到,b是乙個物件,不能直接像a那麼寫,需要深度監聽才能捕捉到,但是當我想去捕捉b物件中某乙個值的變化時卻發現,列印出來的兩個值是不一樣的,如圖 這樣就只能知道物件...

vue watch監聽物件及對應值的變化

var vm new vue watch b deep true vm.a 2 vm.b.c 2 a是乙個普通的值,當a的值變化時會被監聽到,b是乙個物件,不能直接像a那麼寫,需要深度監聽才能捕捉到,但是當我想去捕捉b物件中某乙個值的變化時卻發現,列印出來的兩個值是不一樣的,如圖 這樣就只能知道物件...

Vue watch深度監聽的正確開啟方式

在大部分日常開發中,我們經常需要使用watch監聽資料變化,但如果想監聽的資料層級比較深,往往結果並不盡如人意,本文介紹兩種深度監聽資料變化的方法 1.借助deep true深度監聽watch 開啟深度監聽 deep true 複製 watch監聽物件,同時用 deep true 深度監聽,此時只有...