vue.js中$watch的oldvalue與newValue怎么用

這篇文章給大家分享的是有關vue.js中$watch的oldvalue與newValue怎么用的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

$watch中的oldvalue和newValue

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

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

但是在使用過程中我發現這兩個值并不總是預期的。下面來一起看看詳細的介紹：

定義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))
 },
 }

定義事件觸發

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

測試結果為

1. 對數組進行push操作和對Obj進行$set操作，雖然都可能觸發watch事件，但是在callback返回的結果中，oldValue和newValue相同。字符串對象如預期返回

2. 在對數組和Obj統一進行賦值操作時，watch觸發并且oldValue和newValue如預期返回

關于watch的其他測試

不能夠觸發監聽的

1、數組

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

        使用原生delete刪除某個屬性

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

        對某個下標重新賦值

2、對象

        修改某個屬性的值（但是會觸發這個屬性的監聽）

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

        原生delete刪除某個屬性

以上總結可能存在不足

萬金油實現watch監聽

在修改完數據后添加這樣一段代碼

array

arr = [...arr]

obj

obj = {...obj}

感謝各位的閱讀！關于“vue.js中$watch的oldvalue與newValue怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！