$watch中的oldvalue和newValue

大家都知道，在vue.js中給我們提供了$watch的方法來做對象變化的監(jiān)聽，而且在callback中會返回兩個對象，分別是oldValue和newValue.

顧名思義，這兩個對象就是對象發(fā)生變化前后的值。

但是在使用過程中我發(fā)現(xiàn)這兩個值并不總是預(yù)期的。下面來一起看看詳細的介紹：

定義data的值

data: { arr: [{  name: '笨笨',  address: '上海' }, {  name: '笨笨熊',  address: '北京' }], obj: {  name: '呆呆',  address: '蘇州' }, str: '哈哈哈' }

定義watch

watch: { arr: function(newValue, oldValue) {  console.log(newValue, oldValue)  console.log(JSON.stringify(oldValue) === JSON.stringify(newValue)) }, obj: function(newValue, oldValue) {  console.log(newValue, oldValue)  console.log(JSON.stringify(oldValue) === JSON.stringify(newValue)) }, str: function(newValue, oldValue) {  console.log(newValue, oldValue)  console.log(JSON.stringify(oldValue) === JSON.stringify(newValue)) }, }

定義事件觸發(fā)

methods: { test() {  this.arr.push({  name: 9  })  this.$set(this.obj, 'i', 0)  this.str = '' }, test1() {  this.arr = [{  name: '000'  }]  this.obj = {  name: 999  }  this.str = '123' } }

測試結(jié)果為

1. 對數(shù)組進行push操作和對Obj進行$set操作，雖然都可能觸發(fā)watch事件，但是在callback返回的結(jié)果中，oldValue和newValue相同。字符串對象如預(yù)期返回
2. 在對數(shù)組和Obj統(tǒng)一進行賦值操作時，watch觸發(fā)并且oldValue和newValue如預(yù)期返回

關(guān)于watch的其他測試

不能夠觸發(fā)監(jiān)聽的

1、數(shù)組

        修改某個下標(biāo)的某個屬性的值

        使用原生delete刪除某個屬性

        對某個下標(biāo)新增一個屬性（不使用$set）

        對某個下標(biāo)重新賦值

2、對象

        修改某個屬性的值（但是會觸發(fā)這個屬性的監(jiān)聽）

        新增一個屬性（不使用$set）

        原生delete刪除某個屬性

以上總結(jié)可能存在不足

萬金油實現(xiàn)watch監(jiān)聽

在修改完數(shù)據(jù)后添加這樣一段代碼

array

arr = [...arr]

obj

obj = {...obj}

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網(wǎng)的支持。