快捷導(dǎo)航

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

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

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

$watch中的oldvalue和newValue

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

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

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

定義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'
 }
 }

測(cè)試結(jié)果為

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

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

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

1、數(shù)組

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

使用原生delete刪除某個(gè)屬性

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

對(duì)某個(gè)下標(biāo)重新賦值

2、對(duì)象

修改某個(gè)屬性的值（但是會(huì)觸發(fā)這個(gè)屬性的監(jiān)聽(tīng)）

新增一個(gè)屬性（不使用$set）

原生delete刪除某個(gè)屬性

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