Propriété calculée de Vue3

Vue3 选项式 APIVue3 API des options

ComputedLes propriétés calculées sont un moyen, dans Vue.js, de déclarer des valeurs calculées qui dépendent d'autres données.

ComputedCela permet d'encapsuler une logique complexe dans une propriété et de l'utiliser dans les templates comme des données ordinaires.

ComputedLa valeur de la propriété se met automatiquement à jour en fonction de ses données dépendantes, donc lorsque les données changent,computedla propriété sera également recalculée automatiquement.

Pourquoi utiliser des propriétés calculées ?

  1. Simplifier la logique des templates
    Dans Vue, écrire une logique complexe directement dans les templates peut rendre le code difficile à maintenir. En utilisantcomputeddes propriétés calculées, vous pouvez déplacer la logique complexe hors des templates, ce qui rend le code plus clair.

  2. Optimisation des performances
    ComputedLes propriétés calculées sont mises en cache en fonction de leurs données dépendantes. Ce n'est que lorsque les données dépendantes changentcomputedque la propriété sera recalculée. Ce mécanisme évite les calculs inutiles et améliore les performances.

  3. Mises à jour réactives
    Le système réactif de Vue suit automatiquementcomputedles dépendances des propriétés calculées et recalcule les valeurs lorsque les dépendances changent, garantissant que les données sont toujours à jour.

Comment utiliser les propriétés calculées ?

Dans Vue3,computedles propriétés calculées peuvent êtrecomputeddéfinies à l'aide de la fonction. Voici un exemple simple :

Exemple

import { ref, computed } from 'vue';

export default {
  setup() {
    // Définir une donnée réactive
    const firstName = ref('John');
    const lastName = ref('Doe');

    // Définir une propriété calculée
    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`;
    });

    return {
      firstName,
      lastName,
      fullName,
    };
  },
};

Explication du code

  1. refLa fonction
    est utilisée pour créer des données réactives.firstNameetlastNameest une variable réactive.
  2. computedLa fonction
    est utilisée pour définir une propriété calculée.fullNameest unecomputedpropriété calculée, qui dépend defirstNameetlastName。
  3. Utilisation dans les templates
    Dans le template, vous pouvez directement utiliserfullName, il sera automatiquement mis à jour en fonction defirstNameetlastNamela valeur de ...

Mécanisme de mise en cache des propriétés calculées

ComputedLa valeur d'une propriété calculée est mise en cache, et elle n'est recalculée que lorsque ses données dépendantes changent. Par exemple :

Exemple

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

console.log(doubleCount.value); // Affiche 0
count.value = 2;
console.log(doubleCount.value); // Affiche 4

Dans cet exemple,doubleCountla valeur de ... n'est recalculée que lorsquecountle ... change.

Propriété calculée vs Méthodes

ComputedLes propriétés calculées etmethodsLes méthodes peuvent toutes deux être utilisées pour encapsuler la logique, mais elles présentent les différences suivantes :

  1. Mise en cache
    ComputedLes propriétés calculées mettent en cache les résultats, tandis quemethodsLes méthodes sont réexécutées à chaque appel.
  2. Performance
    Si la logique est complexe et nécessite des appels fréquents, l'utilisation decomputedpropriétés calculées peut améliorer les performances.
  3. Cas d'utilisation
    ComputedLes propriétés calculées conviennent aux valeurs calculées à partir d'autres données, tandis quemethodsles méthodes conviennent pour effectuer des opérations ou gérer des événements.

Exemple de comparaison :

Exemple

const count = ref(0);

// Utiliser une propriété calculée
const doubleCount = computed(() => count.value * 2);

// Utiliser des méthodes
function getDoubleCount() {
  return count.value * 2;
}

Vue3 选项式 APIVue3 API des options

Autres extensions