快捷導航

深入理解vue.js中$watch的oldvalue與newValue

更新時間：2017年08月07日 09:33:05 作者：zuank

這篇文章主要給大家介紹了關(guān)于vue.js中$watch的oldvalue與newValue的相關(guān)資料，文中通過示例代碼介紹的非常詳細，并且介紹了關(guān)于watch的其他測試，對大家學習或者使用vue.js具有一定的參考學習價值，需要的朋友們下面跟著小編來一起看看吧。

$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é)果為

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

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

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

1、數(shù)組

修改某個下標的某個屬性的值

使用原生delete刪除某個屬性

對某個下標新增一個屬性（不使用$set）

對某個下標重新賦值

2、對象

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

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

原生delete刪除某個屬性

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