Tutoriel de base VUE3 : calculé à l'aide du framework réactif Vue.js

Vue.js est un framework JavaScript open source qui adopte le modèle MVVM (Model-View-ViewModel) et vise à fournir un moyen simple et flexible de créer des interfaces utilisateur. Parmi eux, le framework réactif est l'une des fonctionnalités les plus importantes de Vue.js, qui permet aux développeurs d'effectuer des liaisons bidirectionnelles et des mises à jour réactives des données. Dans Vue.js, le calcul est l'un des concepts importants. Cet article présentera l'utilisation de base et des exemples de calcul.

1. Qu'est-ce qui est calculé ?

computed est une propriété dans Vue.js, qui peut implémenter la fonction de propriétés calculées dynamiquement. En d'autres termes, calculé peut calculer dynamiquement une nouvelle valeur en fonction des données dont elle dépend, et la propriété calculée sera automatiquement mise à jour lorsque les données dont elle dépend changent. Contrairement aux méthodes, calculé est une propriété calculée plutôt qu'une méthode.

2. L'utilisation de base du calculated

L'attribut calculé peut être défini de la manière suivante :

new Vue({
  // ...
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

Dans le code ci-dessus, nous définissons une propriété reverseMessage Computed, qui est le résultat calculé basé sur la propriété de message.

Ensuite, nous utiliserons l'attribut calculé dans le modèle HTML. Afin d'obtenir la valeur de l'attribut calculé, nous ne lions plus le message directement, mais utilisons l'attribut calculé, comme indiqué ci-dessous :

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

Dans le modèle, nous pouvons utiliser l'expression de différence {{ }} to Affiche la valeur d'une propriété calculée. Puisque nous avons défini reverseMessage comme propriété calculée, Vue.js effectue automatiquement le calcul et met à jour la vue.

3. Le mécanisme de cache de calculé

Lorsque les données dont dépend l'attribut calculé changent, calculé recalculera et mettra automatiquement à jour la vue. Cependant, lorsque les données dont dépend l'attribut calculé ne changent pas, calculé se souviendra du résultat du dernier calcul et renverra directement la dernière valeur. Ce mécanisme de mise en cache peut améliorer les performances et l’efficacité des applications.

Par exemple, dans le code suivant, nous définissons un attribut calculé fullName :

new Vue({
  // ...
  data: {
    firstName: 'Peter',
    lastName: 'Parker'
  },
  computed: {
    fullName: function () {
      console.log('computed')
      return this.firstName + ' ' + this.lastName
    }
  }
})

Lorsque nous accédons à fullName pour la première fois, la console affichera une news "calculée" . Cependant, lorsque l'on modifie la valeur de l'attribut firstName ou lastName, calculé ne recalculera pas à chaque fois, mais renvoie directement le résultat du dernier calcul.

4. La différence entre calculé et les méthodes

Les méthodes calculées et peuvent être utilisées pour implémenter la fonction d'attributs calculés dynamiquement. Leur principale différence réside dans le mécanisme de mise en cache des attributs calculés. attributs.

Dans l'exemple, on définit une propriété calculée fullName et une méthode getFullName :

new Vue({
  // ...
  data: {
    firstName: 'Peter',
    lastName: 'Parker'
  },
  computed: {
    fullName: function () {
      console.log('computed')
      return this.firstName + ' ' + this.lastName
    }
  },
  methods: {
    getFullName: function () {
      console.log('method')
      return this.firstName + ' ' + this.lastName
    }
  }
})

Dans le template, on peut appeler fullName et getFullName de la manière suivante : #🎜 🎜 #

<div id="example">
  <p>Computed fullName: "{{ fullName }}"</p>
  <p>Method fullName: "{{ getFullName() }}"</p>
</div>

Nous avons constaté que lors de l'appel de la méthode getFullName, elle sera recalculée à chaque fois sans utiliser le résultat mis en cache. Par conséquent, si nous devons appeler fréquemment une méthode, l’utilisation de l’attribut calculé peut améliorer les performances et l’efficacité de l’application.

5. Exemple calculé

Ce qui suit est un exemple de calcul du prix total d'un panier. Nous supposons que la structure des données du panier est la suivante : # 🎜🎜#

new Vue({
  // ...
  data: {
    items: [
      { name: 'iPhone', price: 6999, count: 1 },
      { name: 'iPad', price: 3888, count: 2 },
      { name: 'MacBook', price: 9888, count: 1 }
    ]
  },
  computed: {
    totalPrice: function () {
      var result = 0
      for (var i = 0; i < this.items.length; i++) {
        result += this.items[i].price * this.items[i].count
      }
      return result
    }
  }
})

Dans le template, on peut utiliser l'attribut calculé pour afficher le prix total du panier :

<div id="example">
  <table>
    <thead>
      <tr>
        <th>商品</th>
        <th>单价</th>
        <th>数量</th>
        <th>小计</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in items" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
        <td>{{ item.count }}</td>
        <td>{{ item.price * item.count }}</td>
      </tr>
      <tr>
        <td colspan="3">总价：</td>
        <td>{{ totalPrice }}</td>
      </tr>
    </tbody>
  </table>
</div>

Dans l'exemple ci-dessus, on définit un attribut calculé totalPrice qui dépend sur les prix de tous les articles de la gamme d'articles et leur quantité. Chaque fois que le prix ou la quantité d'un article du tableau change, Vue.js recalculera le prix total et mettra automatiquement à jour la vue.

6. Résumé

Dans Vue.js, le calcul est une fonctionnalité très puissante et importante, qui est la clé pour réaliser des propriétés calculées dynamiquement. Le mécanisme de mise en cache des propriétés calculées peut améliorer les performances et l'efficacité des applications. Contrairement aux méthodes, calculé est une propriété calculée plutôt qu'une méthode. En apprenant et en utilisant le calcul, nous pouvons créer d'excellentes applications Vue.js de manière plus pratique et plus efficace.

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!