Comment implémenter les objets de surveillance de surveillance et les changements de valeur correspondants dans vue

Ci-dessous, je partagerai avec vous une explication détaillée des changements dans les objets de surveillance de vue watch et des valeurs correspondantes. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

est la suivante :

var vm=new Vue({
  data:{
    a:1,
    b:{
      c:1
    }
  },
  watch:{
    a(val, oldVal){//普通的watch监听
      console.log("a: "+val, oldVal);
    },
    b:{//深度监听，可监听到对象、数组的变化
      handler(val, oldVal){
        console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的
      },
      deep:true
    }
  }
})
vm.a=2
vm.b.c=2

a est une valeur ordinaire, Lorsque la valeur de a change, elle sera surveillée. B est un objet et ne peut pas être écrit directement comme a. Cela nécessite une surveillance approfondie pour le capturer. Cependant, lorsque je veux capturer le changement d'une certaine valeur dans l'objet b, je le fais. constatez qu'il l'imprime. Les deux valeurs​​de sont différentes, comme le montre la figure :

De cette façon, vous pouvez seulement savoir que l'objet a changé mais pas quelle valeur spécifique a changé. Si vous souhaitez surveiller un objet, un changement de valeur peut être effectué en utilisant l'attribut calculé calculé

var vm=new Vue({
  data:{
    b:{
      c:1
    }
  },
  watch:{
    newValue(val, oldVal){
      console.log("b.c: "+val, oldVal);
    }
  },
  computed: {
  　　newValue() {
  　　　　return this.b.c
  　　}
  }
})
vm.b.c=2

. . Utilisez la montre pour surveiller la valeur calculée et vous pouvez savoir directement quelle valeur correspondante a changé, les résultats sont affichés dans la figure :

Ce qui précède est ce que j'ai. compilé pour tout le monde. J’espère qu’il sera utile à tout le monde à l’avenir.

Articles associés :

Exemple de fonctions de serveur web simples implémentées par nodejs

Projets créés par vue-cli, avec de nombreuses configurations Méthode de mise en œuvre de la page

Exemple de méthode simple nodejs d'accès et d'exploitation de la base de données mysql

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!