Explication détaillée de la fonction calculée dans Vue3 : une application qui facilite l'utilisation des propriétés calculées

Vue est un framework de développement front-end très populaire. Il fournit une fonction calculée d'attributs calculés très pratique. Dans Vue3, la fonction calculée a également été mise à niveau et améliorée, la rendant plus facile à utiliser et plus efficace.

computed est d'abord une fonction, qui renverra une valeur, qui pourra être utilisée directement dans le modèle de Vue. La particularité de la fonction calculée est que sa valeur de retour changera dynamiquement en fonction des données de l'instance Vue dont elle dépend, et la fonction calculée est évaluée paresseusement. Tant que les données dépendantes ne changent pas, la fonction calculée ne le sera pas. être évalué.

Dans Vue3, la fonction calculée a été grandement améliorée. Dans le passé, dans Vue2, si vous souhaitez utiliser la fonction calculée, vous devez passer un objet à l'instance Vue. Cet objet contient deux méthodes : getter et setter. Nous devons calculer la valeur requise dans la méthode getter. mettre à jour les autres valeurs dans la méthode setter Propriétés réactives. Cela semble très fastidieux et sujet à la duplication de code et d'erreurs. Dans Vue3, il suffit d'effectuer des calculs directement dans la fonction calculée, et Vue gérera automatiquement la logique mise à jour pour nous.

Par exemple, nous avons une instance Vue avec les données suivantes :

const vm = Vue.createApp({
  data() {
    return {
      firstName: '张',
      lastName: '三',
    }
  },
  computed: {
    fullName() {
      return this.firstName + this.lastName;
    }
  },
  template: `<div>{{fullName}}</div>`
}).mount('#app');

Dans cette instance Vue, nous avons défini deux attributs réactifs firstName et lastName, qui correspondent aux deux zones de saisie dans le modèle. Les utilisateurs peuvent saisir du contenu dans. la boîte. Dans la fonction calculée, nous définissons une fonction fullName, qui renvoie le résultat d'épissage de firstName et lastName, qui est le nom complet saisi par l'utilisateur. Dans le modèle, nous utilisons directement la fonction fullName.

Dans l'exemple ci-dessus, la fonction calculée est très simple. Elle effectue simplement une simple concaténation de chaînes, mais tous les calculs sont effectués dans la fonction calculée et non dans le modèle. Cela rend non seulement le code plus clair et plus facile à comprendre, mais améliore également les performances car les fonctions calculées ne sont recalculées que lorsque les données changent.

Dans Vue3, la fonction calculée fournit également une nouvelle API, qui nous permet de définir des méthodes getter et setter dans la fonction calculée, afin que nous puissions calculer la valeur requise dans la méthode getter et effectuer le traitement des données dans la méthode setter. et notifications.

const vm = Vue.createApp({
  data() {
    return {
      firstName: '张',
      lastName: '三',
    }
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + this.lastName;
      },
      set(value) {
        const names = value.split(' ');
        this.firstName = names[0];
        this.lastName = names[1];
      }
    }
  },
  template: `<div>
               <input v-model="fullName"/>
               {{fullName}}
             </div>`
}).mount('#app');

Dans cet exemple, nous définissons la propriété fullName dans la fonction calculée, qui contient les méthodes getters et setters. Dans la méthode getter, nous calculons la valeur de fullName comme dans l'exemple précédent. Dans la méthode setter, nous recevons une valeur de paramètre, qui est le nom complet saisi par l'utilisateur. Dans la méthode setter, nous divisons le fullName en firstName et lastName via des espaces, puis les attribuons aux propriétés correspondantes de l'instance Vue. De cette façon, nous pouvons saisir fullName dans la zone de saisie, puis afficher les résultats du calcul dans le modèle via une liaison bidirectionnelle.

Pour résumer, la fonction calculée dans Vue3 simplifie grandement l'utilisation des propriétés calculées. Nous pouvons effectuer tous les calculs et mettre à jour la logique directement dans la fonction calculée au lieu de définir manuellement les méthodes getter et setter comme auparavant. Cette amélioration rend non seulement le code plus concis et plus compréhensible, mais améliore également l'efficacité et les performances du calcul. Si vous utilisez Vue3, il est fortement recommandé d'utiliser des fonctions calculées pour calculer et traiter les données.

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!