Comment utiliser calculé dans Vue pour surveiller les modifications de plusieurs données

Vue est un framework frontal populaire qui fournit une méthode pour créer des interfaces utilisateur. La gestion des données dans Vue est assurée par des composants, chaque composant a son propre état et sa propre logique. Dans Vue, nous pouvons utiliser l'attribut calculé pour définir une propriété calculée réactive. L'attribut calculé peut automatiquement mettre à jour sa valeur en fonction des modifications apportées à d'autres données. Par conséquent, dans certains cas, nous pouvons utiliser l'attribut calculé pour écouter les modifications apportées à plusieurs données. Dans cet article, nous expliquerons comment utiliser la propriété calculée dans Vue pour écouter les modifications apportées à plusieurs données.

Dans Vue, nous pouvons utiliser l'attribut calculé pour définir une propriété calculée. Une propriété calculée est une propriété qui dépend d'autres données et sa valeur est calculée sur la base d'autres données. L'attribut calculé peut automatiquement mettre à jour sa valeur en fonction des modifications apportées à d'autres données et dispose d'un mécanisme de mise en cache qui ne sera recalculé que lorsque les données dépendantes changent. Les propriétés calculées peuvent être utilisées comme des propriétés normales. Nous pouvons ainsi accéder aux données et aux méthodes du composant actuel.

Ce qui suit est un exemple simple d'utilisation de propriétés calculées :

<template>
  <div>
    {{fullName}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    }
  }
}
</script>

Dans l'exemple ci-dessus, nous définissons une propriété calculée fullName, qui dépend des deux données firstName et lastName. La valeur de fullName est calculée en concaténant firstName et lastName. Nous utilisons fullName dans le modèle de composant. Lorsque la valeur de firstName ou lastName change, la valeur de fullName sera également automatiquement mise à jour.

Dans le développement réel, nous devrons peut-être surveiller les modifications de plusieurs données. Dans ce cas, nous pouvons utiliser l'attribut calculé. Voici un exemple de surveillance de plusieurs modifications de données :

<template>
  <div>
    {{result}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      x: 0,
      y: 0,
      z: 0
    }
  },
  computed: {
    result: {
      get() {
        return this.x + this.y + this.z
      },
      set(val) {
        if (val <= 100) {
          this.x = val / 3
          this.y = val / 3
          this.z = val / 3
        } else {
          console.log('结果不能大于100')
        }
      }
    }
  }
}
</script>

Dans l'exemple ci-dessus, nous définissons un résultat d'attribut calculé, qui dépend des trois données x, y et z. La valeur du résultat est calculée en additionnant les valeurs de x, y et z. Nous définissons à la fois le getter et le setter dans la propriété calculée. Les getters sont utilisés pour obtenir la valeur d'une propriété calculée et les setters sont utilisés pour définir la valeur d'une propriété calculée. Lorsque nous lions le résultat via v-model, la méthode de définition de l'attribut calculé sera déclenchée si la valeur calculée est supérieure à 100, un message d'avertissement sera affiché sur la console. Sinon, les x, y et z des propriétés calculées seront répartis uniformément en fonction des résultats calculés, mettant ainsi à jour l'état du composant.

En plus de l'exemple ci-dessus, nous pouvons également utiliser l'attribut watch pour surveiller les modifications de plusieurs données. L'attribut watch peut surveiller les modifications de certaines données et exécuter une fonction spécifique. La différence entre lui et l'attribut calculé est que l'attribut watch est généralement utilisé pour surveiller les modifications des données et effectuer certains effets secondaires, tandis que l'attribut calculé est utilisé pour. calculer les attributs et renvoyer de nouvelles données.

Dans Vue, nous pouvons utiliser des attributs calculés pour surveiller les modifications de plusieurs données. Cette technique peut nous aider à mieux gérer l'état des composants. Les attributs calculés peuvent automatiquement mettre à jour leurs valeurs en fonction des modifications apportées à d'autres données et disposer d'un mécanisme de mise en cache. Par rapport à l'utilisation des attributs de surveillance, l'utilisation d'attributs calculés peut réduire les calculs et les mises à jour inutiles.

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!