Une explication détaillée de oldvalue et newValue de $watch dans vue.js

Cet article vous présente principalement les informations pertinentes sur l'ancienne valeur et la nouvelle valeur de $watch dans vue.js. L'article les présente en détail à travers un exemple de code et présente d'autres tests sur watch. Il est utile pour tout le monde d'apprendre ou de. use vue.js a une certaine valeur de référence et d'apprentissage. Les amis qui en ont besoin peuvent suivre l'éditeur pour y jeter un œil.

oldvalue et newValue dans $watch

Comme nous le savons tous, vue.js nous fournit la méthode $watch Surveillance des modifications d'objet. , et deux objets seront renvoyés dans le rappel, à savoir oldValue et newValue.

Comme son nom l'indique, ces deux objets sont les valeurs avant et après le changement d'objet.

Mais à l'utilisation j'ai constaté que ces deux valeurs ne sont pas toujours attendues. Jetons un coup d'œil à l'introduction détaillée :

Définir la valeur des données

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

Définir la montre

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

Définir le déclencheur d'événement

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

Le résultat du test est

1. Appuyez sur array Bien que l'opération et l'opération $set sur Obj puissent déclencher l'événement watch, dans le résultat renvoyé par le rappel, oldValue et newValue sont identiques. L'objet chaîne renvoie comme prévu

2. Lors de l'attribution de valeurs aux tableaux et aux Objs, surveillez les déclencheurs et oldValue et newValue renvoient comme prévu

Autres tests sur la montre

Impossible de déclencher la surveillance

1. valeur d'un attribut d'un indice

Utiliser la suppression native pour supprimer un attribut

Ajouter un attribut à un indice (sans utiliser $ set)

Réaffecter un indice

2. Objet

Modifier la valeur d'une propriété (mais cela déclenchera la surveillance des attributs)

Ajouter un nouvel attribut (sans utiliser $set)

La suppression native supprime un attribut

Le résumé ci-dessus est possible Il y a des lacunes

Wanjiao implémente la surveillance de la montre

Ajouter un tel morceau de code après avoir modifié les données

array

obj

arr = [...arr]

obj = {...obj}

Résumé

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!