vue.js中關於$watch的oldvalue與newValue的深入講解

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

$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刪除某個屬性

        原生delete刪除某個屬性

#以上總結可能總結可能摘要

#以上總結可能總結可能總結

##以上摘要可能總結可能總結

##以上總結可能總結可能摘要

#以上總結可能總結可能摘要#############以上摘要可能總結可能總結##############以上摘要可能總結可能總結##############以上總結可能摘要#######1SS3772可能總結可能總結#############以上。存在不足#########萬金油實作watch監聽############在修改完資料後加入這樣一段程式碼#########array###

arr = [...arr]

###obj###

obj = {...obj}

#########總結##########

以上是vue.js中關於$watch的oldvalue與newValue的深入講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！