1.vue中監(jiān)聽對象數(shù)據(jù)屬性值的改變，可以使用深度監(jiān)聽

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

注意：我們應(yīng)盡量避免在監(jiān)聽方法中更改當(dāng)前監(jiān)聽對象的屬性值，以免再次觸發(fā)監(jiān)聽函數(shù)

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

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

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

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

3.取消監(jiān)聽

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

unwatch() // 取消觀察函數(shù)

4.立即觸發(fā)監(jiān)聽

我們有時會有這個需求，在頁面初始化時執(zhí)行某個監(jiān)聽。因此，我們可能會在 created 中去調(diào)用需要執(zhí)行的監(jiān)聽代碼，但現(xiàn)在我們可以使用 immediate 來實現(xiàn)這個功能。

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

補充知識：vue watch監(jiān)聽數(shù)據(jù)，新老值一樣？讓其不一樣吧！

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

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

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

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深度監(jiān)聽(監(jiān)聽對象和數(shù)組的改變)與立即執(zhí)行監(jiān)聽實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持好吧啦網(wǎng)。