La fonction calculée dans Vue3 : facilite l'utilisation des propriétés calculées

Fonction calculée dans Vue3 : utilisation pratique des propriétés calculées

Vue.js est actuellement l'un des frameworks JavaScript les plus populaires. Sa syntaxe de modèle, sa liaison de données, sa composantisation et d'autres fonctionnalités rendent Vue.js de plus en plus largement utilisé dans le développement front-end. Dans Vue.js, la fonction calculée est une fonctionnalité très pratique. Elle peut nous aider à simplifier le code, à réduire les calculs répétés et à améliorer les performances et la lisibilité du code. Pour la version Vue.js 3.x, cet article présentera en détail l'utilisation de la fonction calculée et ses avantages.

1. La définition et l'utilisation de base de la fonction calculée

La fonction calculée est une fonctionnalité très pratique dans Vue.js, qui peut nous aider à calculer automatiquement en fonction des expressions utilisées dans la valeur du modèle et renvoie le résultat. Contrairement à la méthode méthodes, la fonction calculée peut non seulement appeler des méthodes définies, mais également obtenir des valeurs directement à partir des attributs de données, et le calcul ne sera recalculé que lorsque la valeur de l'attribut dont elle dépend change.

Dans la version Vue.js 3.x, nous pouvons définir des propriétés calculées en ajoutant un objet calculé au composant. Par exemple, dans un composant dont nous devons calculer le prix total des marchandises, le code est le suivant :

<template>
  <div>
    <p>商品价格：{{price}} 元</p>
    <p>商品数量：{{amount}}</p>
    <p>商品总价：{{totalPrice}} 元</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        price: 10,
        amount: 2
      }
    },
    computed: {
      totalPrice() {
        return this.price * this.amount;
      }
    }
  }
</script>

Dans le code ci-dessus, nous définissons un objet calculé, qui contient une propriété calculée de totalPrice. Dans le modèle, nous pouvons directement utiliser {{totalPrice}} pour afficher le prix total du produit. À ce stade, totalPrice calculera automatiquement le produit du prix et du montant et renverra le résultat au modèle.

2. Caractéristiques de la fonction calculée

1. Les propriétés calculées sont mises en cache

Dans Vue.js, la fonction calculée a la caractéristique d'être mise en cache . Cela signifie que si les données sur lesquelles s'appuie la méthode calculée n'ont pas changé, la méthode calculée renvoie directement le résultat mis en cache au lieu de recalculer. Cela évite les calculs répétés et améliore les performances du code. Par exemple, nous pouvons modifier le code ci-dessus en :

<template>
  <div>
    <p>商品价格：{{price}} 元</p>
    <p>商品数量：{{amount}}</p>
    <p>商品总价：{{totalPrice}} 元</p>
    <p>商品总价（不使用缓存）：{{totalPriceNoCache}} 元</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        price: 10,
        amount: 2
      }
    },
    computed: {
      totalPrice() {
        return this.price * this.amount;
      },
      totalPriceNoCache() {
        return this.price * this.amount + Math.random();
      }
    }
  }
</script>

Dans le code ci-dessus, nous avons ajouté une nouvelle propriété calculée totalPriceNoCache. Puisque nous utilisons un nombre aléatoire pour interférer avec les résultats du calcul, les résultats seront différents à chaque fois. Dans le modèle, nous pouvons voir que totalPrice n'est calculé qu'une seule fois, tandis que totalPriceNoCache est recalculé à chaque fois.

2. Les propriétés calculées peuvent dépendre d'autres propriétés

Le résultat calculé de la méthode calculée peut non seulement être basé sur les propriétés de données du composant actuel, mais peut également être basé sur d'autres propriétés de données de composants, propriétés calculées et attributs d'accessoires, etc. Vue.js suit automatiquement ces dépendances et recalcule les résultats des méthodes calculées lorsque les dépendances changent.

Par exemple, ce qui suit montre un exemple basé sur d'autres propriétés calculées :

<template>
  <div>
    <p>商品价格：{{price}} 元</p>
    <p>商品数量：{{amount}}</p>
    <p>商品总价：{{totalPrice}} 元</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        price: 10,
        amount: 2
      }
    },
    computed: {
      totalPrice() {
        return this.discount + this.tax;
      },
      discount() {
        return this.price * 0.8;
      },
      tax() {
        return this.price * 0.1;
      }
    }
  }
</script>

Dans le code ci-dessus, nous définissons trois propriétés calculées : totalPrice, discount et tax. Parmi eux, le calcul du prix total repose sur deux attributs calculés, la remise et la taxe.

Summary

La fonction calculée est une fonctionnalité très pratique de Vue.js, qui peut nous aider à calculer automatiquement les valeurs et à renvoyer des résultats basés sur les expressions utilisées dans les modèles. Contrairement à la méthode méthodes, la fonction calculée peut non seulement appeler des méthodes définies, mais également obtenir des valeurs directement à partir des attributs de données, et le calcul ne sera recalculé que lorsque la valeur de l'attribut dont elle dépend change. Dans la version Vue.js 3.x, la fonction calculée a la fonctionnalité de mise en cache, qui peut enregistrer les calculs répétés et améliorer les performances du code. Dans le même temps, les résultats de la méthode calculée peuvent être basés sur les attributs de données, les attributs calculés et les attributs d'accessoires d'autres composants. Vue.js suivra automatiquement ces dépendances pour améliorer la lisibilité et la maintenabilité du code.

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!