An in-depth explanation of oldvalue and newValue of $watch in vue.js

This article mainly introduces you to the relevant information about the oldvalue and newValue of $watch in vue.js. The article introduces it in detail through the example code, and introduces other tests about watch. It is helpful for everyone to learn or use vue. .js has certain reference and learning value. Friends who need it can follow the editor to take a look.

oldvalue and newValue in $watch

As we all know, vue.js provides us with the $watch method. Monitoring of object changes, and two objects will be returned in the callback, namely oldValue and newValue.

As the name suggests, these two objects are the values ​​before and after the object changes.

But during use I found that these two values ​​​​are not always expected. Let’s take a look at the detailed introduction:

define the value of data

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

define 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))
 },
 }

Define event trigger

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

The test result is

1. Push the array and perform $ on Obj Although the set operation may trigger the watch event, in the results returned by the callback, oldValue and newValue are the same. The string object returns as expected

2. When assigning values ​​to the array and Obj, watch is triggered and oldValue and newValue return as expected

Other tests about watch

Cannot trigger monitoring

1, array

Modify the value of a certain attribute of a certain attribute

Use the native delete to delete a certain attribute

q to a new attribute to a single bid (not using $ $ $ set)

                                                                                                              out out out out out out out out of Attribute monitoring)

                                                                                                ‐             ous added a new attribute (without using $set)                                                                      related to becoming a dart to be being used to be used to be be expected to be in need of There are deficiencies

Wanjinyou implements watch monitoring

Add such a piece of code after modifying the data

array

arr = [...arr]

obj

obj = {...obj}

Summary

The above is the detailed content of An in-depth explanation of oldvalue and newValue of $watch in vue.js. For more information, please follow other related articles on the PHP Chinese website!