Explication détaillée de la fonction calculée dans Vue3 : utilisation pratique des propriétés calculées

Explication détaillée de la fonction calculée dans Vue3 : Utilisation pratique des propriétés calculées

Les propriétés calculées sont une méthode couramment utilisée dans Vue. Elles sont principalement utilisées pour placer des calculs logiques dans des modèles afin de faciliter la manipulation et l'affichage des données par les développeurs. Dans Vue3, les propriétés calculées sont toujours une fonction très importante, et la fonction calculée est plus pratique pour utiliser les propriétés calculées. Cet article fournira une introduction détaillée et une explication de la fonction calculée dans Vue3.

Qu'est-ce que la fonction calculée ?

La fonction calculée est une fonction intégrée dans Vue3. Elle est principalement utilisée pour créer une propriété calculée. En utilisant la fonction calculée, nous pouvons facilement créer une propriété calculée, rendant le code plus concis et lisible. La fonction calculée est déclarée fonctionnellement dans l'instance du composant et elle sera automatiquement mise à jour chaque fois que les variables réactives dont dépend la propriété calculée changent.

Utilisation de base de la fonction calculée

Pour utiliser la fonction calculée pour créer une propriété calculée, il vous suffit de déclarer une propriété fonctionnelle dans le composant. Voici un exemple de code simple qui utilise la fonction calculée pour créer une propriété calculée :

<template>
  <div>
    <p>原来的值：{{ multiplied }}</p>
    <p>改变后的值：{{ multipliedByTwo }}</p>
    <button @click="updateValue">更新</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 10,
    }
  },
  computed: {
    multiplied() {
      return this.value * 2
    },
    multipliedByTwo() {
      return this.multiplied * 2
    },
  },
  methods: {
    updateValue() {
      this.value = 20
    }
  }
}
</script>

Dans l'exemple de code ci-dessus, nous avons défini une valeur d'attribut de données pour représenter la valeur d'origine de la propriété calculée. Deux propriétés calculées sont créées via la fonction calculée, à savoir multipliée et multipliéeByTwo. Parmi eux, multiplié dépend de la variable de valeur dans l'attribut data, tandis quemultipliedByTwo dépend de multiplié. De cette façon, nous pouvons facilement activer les propriétés calculées et calculer les valeurs pertinentes en temps réel.

Utilisation avancée de la fonction calculée

La fonction calculée a également des utilisations avancées, qui permettent de mieux contrôler le comportement des propriétés calculées. Elles seront présentées une par une ci-dessous.

1. Getters et Setters

La fonction calculée peut contrôler la lecture et la mise à jour des propriétés calculées via des getters et des setters. Les getters sont des fonctions de lecture pour les propriétés calculées et les setters sont des fonctions de mise à jour pour les propriétés calculées. Par défaut, les propriétés calculées sont en lecture seule et ne peuvent pas être modifiées, mais grâce à la fonction setters, nous pouvons directement modifier la valeur de la propriété calculée pour atteindre l'objectif de mise à jour forcée.

Ce qui suit est un exemple de code d'une propriété calculée utilisant des getters et des setters :

<template>
  <div>
    <p>原来的价格：{{ price }}</p>
    <p>折扣后的价格：{{ discountedPrice }}</p>
    <button @click="applyDiscount">打折</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalPrice: 100,
      discountPercentage: 10
    }
  },
  computed: {
    price: {
      get() {
        return this.originalPrice
      },
      set(newPrice) {
        this.originalPrice = newPrice
      }
    },
    discountedPrice() {
      const discount = this.discountPercentage / 100
      return this.price - (this.price * discount)
    }
  },
  methods: {
    applyDiscount() {
      this.price = this.price - 10
    }
  }
}
</script>

Dans l'exemple de code ci-dessus, nous déclarons un prix d'attribut calculé et définissons ses fonctions de getters et de setters. discountedPrice dépend du prix. Lorsque le prix change, discountedPrice sera automatiquement mis à jour. De plus, nous avons également défini une méthode applyDiscount, qui peut directement modifier le prix de l'attribut calculé en exécutant cette méthode, afin que la mise à jour forcée de l'attribut calculé puisse être réalisée.

2. Mise en cache des propriétés calculées

Dans Vue3, la mise en cache des propriétés calculées est activée par défaut. Cela signifie que si les variables dépendantes de la propriété calculée n'ont pas changé, la propriété calculée renverra directement le dernier résultat au lieu de recalculer. Cela permet d'économiser du temps et des performances de calcul et d'améliorer l'efficacité de l'exécution du code.

Ce qui suit est un exemple de code pour la mise en cache des attributs calculés :

<template>
  <div>
    <p>原来的数量：{{ count }}</p>
    <p>倍数：{{ multiplier }}</p>
    <p>计算结果：{{ computedValue }}</p>
    <button @click="updateCount">更新数量</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      multiplier: 2
    }
  },
  computed: {
    computedValue() {
      console.log('计算属性执行')
      return this.count * this.multiplier
    }
  },
  methods: {
    updateCount() {
      this.count++
    }
  }
}
</script>

Dans l'exemple de code ci-dessus, nous déclarons un attribut calculé computationdValue, qui est utilisé pour calculer le produit du nombre et du multiplicateur. Après le cycle de vie monté, la propriété calculée est exécutée une fois et le cache de la propriété calculée sera activé. Dans la méthode updateCount, nous déclenchons le recalcul decomputedValue en mettant à jour la valeur de la variable count. À ce stade, vous pouvez constater dans la console que la propriété calculée ne sera recalculée que lorsque la valeur change.

Si vous ne souhaitez pas activer la mise en cache des propriétés calculées, vous pouvez utiliser la fonction ref dans la fonction calculée. La fonction ref renvoie un objet réactif et la fonction de calcul est recalculée à chaque accès à l'objet.

import Vue, { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const computedValue = () => {
      console.log('计算属性执行')
      return count.value * 2
    }

    return {
      count,
      computedValue
    }
  }
}

Résumé

La fonction calculée est une fonction très importante dans Vue3. Elle nous fournit un moyen très pratique d'exploiter les données en créant des propriétés calculées. Grâce à l'introduction de cet article, je pense que les lecteurs ont une compréhension de base des fonctions calculées et maîtrisent certaines utilisations et techniques avancées. Dans le développement de Vue3, la maîtrise de l'utilisation des fonctions calculées apportera certainement une aide considérable à notre travail de codage.

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!