1.vue中監聽對象數據屬性值的改變，可以使用深度監聽

data () { return { form: { status: ’’, cpufrequency: ’’, systemstacksize: ’’, scalabilityclass: ’’ } } }, watch: { form: { // 深度監聽 handler(val, oldVal){ console.log(’currentForm’,val, oldVal) // 但是這兩個值打印出來卻都是一樣的,因為它們的引用指向同一個對象/數組 }, deep:true } }

注意：我們應盡量避免在監聽方法中更改當前監聽對象的屬性值，以免再次觸發監聽函數

2.若只監聽某個或部分屬性值的變化，則可以配合計算屬性computed來解決

data () { return { form: { status: ’’, cpufrequency: ’’, systemstacksize: ’’, scalabilityclass: ’’ } } }, computed: { status() { return this.form.status } }, watch: { status() { console.log(’currentVal’, this.status) } }

當然，上面這種方法會多出一個計算屬性，并不是最好的方法，通過查看官方api，其實還有一種方法：

data () { return { form: { status: ’’, cpufrequency: ’’, systemstacksize: ’’, scalabilityclass: ’’ } } }, watch: { ’form.status’(val, oldVal) { console.log(’currentVal’, val) } }

3.取消監聽

var unwatch = vm.$watch(’a’, cb) // 返回一個取消監聽函數

unwatch() // 取消觀察函數

4.立即觸發監聽

我們有時會有這個需求，在頁面初始化時執行某個監聽。因此，我們可能會在 created 中去調用需要執行的監聽代碼，但現在我們可以使用 immediate 來實現這個功能。

watch: { ’form.status’() { handler(val, oldVal) { // 執行一些操作 }, immediate: true } }

補充知識：vue watch監聽數據，新老值一樣？讓其不一樣吧！

我就廢話不多說了，大家還是直接看代碼吧~

data:{ testData:{ dataInfo:{a: ’我是a’,b: ’我是b’ } } }, watch: { testData: { handler: (val, olVal) => { console.log(’我變化了’, val, olVal) }, deep: true } }

如果testData發生了變化，就會打印出val，olVal，但是他們打印出來的結果都是一樣的，因為數據同源。雖然可以監聽到他的變化，但是要比較數據差異就不行了。如果想要得到不同的值可以結合計算屬性。

data:{ testData:{ dataInfo:{a: ’我是a’,b: ’我是b’ } } }, watch: { testDataNew: { handler: (val, olVal) => { console.log(’我變化了’, val, olVal) }, deep: true } }, computed: { testDataNew() { return JSON.parse(JSON.stringify(this.testData)) } }

以上這篇vue深度監聽(監聽對象和數組的改變)與立即執行監聽實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。