Introduction et résumé de l'utilisation des attributs d'écoute vue2.0

---

Nous devons souvent surveiller les changements dans une certaine valeur d'attribut au travail. À l'heure actuelle, nous devons utiliser l'attribut de surveillance watch. Je résume ici les trois scénarios d'utilisation de l'attribut watch et j'espère que cela sera utile. à vous :

1. Surveillance de la version de base :

La scène est la suivante : entrez votre âge dans la zone de saisie, si l'âge est de 0 à 15 ans, le message d'invite : Vous êtes encore un enfant, si l'âge est de 15 à 25 ans, Message rapide : Vous êtes déjà un adolescent Si vous avez plus de 25 ans, message rapide : Vous avez grandi. Selon les exigences, nous obtenons le code suivant avec l'attribut de surveillance :

<template>
  <p id="app">
    年齡：<input type="number" v-model="age"><br>
    提示信息：<span>{{infoMsg}}</span>
  </p>
</template>

<script>
export default {
  data() {
    return {
      age: "",
      infoMsg:""
    }
  },
  watch:{
    age:function(val,oldval){
      if(val>0 && val<15){
        this.infoMsg="你还是个小孩"
      }else if(val>15 && val<25){
        this.infoMsg="你已经是个少年"
      }else{
        this.infoMsg="你已经长大了"
      }
    }
  }
}
</script>

Ce qui doit être expliqué spécialement est : la signification des deux paramètres dans la méthode de l'attribut de surveillance : le premier Val est la valeur de la propriété surveillée, et oldval est la valeur avant que la propriété ne change. Puisqu'il s'agit d'un paramètre formel, le nom du paramètre peut être défini par vous-même, mais la signification du paramètre ne changera pas. .

2. Surveillance avancée des versions :

Modifions les exigences : les règles de base restent inchangées, mais en raison de changements dans la base de données en arrière-plan (dessinez un cercle et maudissez-le), nous devons soumettre un demande comme celle-ci La structure des données de

 data() {
    return {
      info: {
        age: ""
      },
      infoMsg: ""
    };
  },

Puisque nous surveillons les changements dans la valeur d'âge de l'attribut dans les informations sur l'objet, nous devons utiliser une surveillance approfondie. Le code spécifique est le suivant :

<🎜. >

<script>
export default {
  data() {
    return {
      info: {
        age: &quot;&quot;
      },
      infoMsg: &quot;&quot;
    };
  },
  watch: {
    info: {
      handler: function(val, oldval) {
        var that = this;
        if (val.age > 0 && val.age < 15) {
          that.infoMsg = "你还是个小孩";
        } else if (val.age > 15 && val.age < 25) {
          that.infoMsg = "你已经是个少年";
        } else {
          that.infoMsg = "你已经长大了";
        }
      },
      deep: true
    }
  }
};
</script>

Il y a deux points à noter ici : 1. La fonction ici ne peut pas être remplacée par une fonction flèche. Si une fonction flèche est utilisée, le point de celle-ci sera

global. 2. Vous remarquerez qu'un attribut supplémentaire ajouté ici est profond, ce qui signifie s'il faut activer la surveillance approfondie. S'il est activé, la valeur est vraie, sinon elle est fausse.

3. La surveillance la plus avancée :

Concernant le deuxième cas, je ne sais pas si vous avez découvert un problème : ce que nous surveillons, c'est le changement d'un certain attribut dans un objet , mais si cet objet contient de nombreuses valeurs, bien que vous puissiez également utiliser la deuxième méthode pour surveiller, ce sera un énorme gaspillage de ressources. En tant que programmeur rigoureux (visage souriant), une telle chose ne doit pas se produire, nous pouvons donc optimiser le code ci-dessus en combinaison avec les attributs calculés :

<template>
  <p id="app">
    年齡：<input type="number" v-model="info.age"><br>
    提示信息：<span>{{infoMsg}}</span>
  </p>
</template>

<script>
export default {
  data() {
    return {
      info: {
        age: "",
        name: "",
        hobit: ""
      },
      infoMsg: ""
    };
  },
  computed: {
    ageval: function() {
      return this.info.age;
    }
  },
  watch: {
    ageval: {
      handler: function(val, oldval) {
        var that = this;
        if (val > 0 && val < 15) {
          that.infoMsg = "你还是个小孩";
        } else if (val > 15 && val < 25) {
          that.infoMsg = "你已经是个少年";
        } else {
          that.infoMsg = "你已经长大了";
        }
      },
      deep: true
    }
  }
};
</script>

D'après ce qui précède, nous pouvons voir que cette fois, nous surveillons les attributs calculés ageval , et l'attribut calculé renvoie la valeur de l'âge dans l'objet d'information. En comparant avec le deuxième code, nous pouvons constater que l'un des deux codes surveille les informations de l'objet et l'autre est la valeur de l'âge dans l'objet d'information. les performances sont grandement améliorées, c'est le résultat que nous attendons.

Recommandations associées :

Utiliser Vue.js pour surveiller les modifications de propriétés

Propriétés calculées et surveillance des données de Vue.js

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!