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 深度監聽,此時只有...