Guide du débutant sur VUE3 : données réactives et propriétés calculées

Dans les frameworks front-end modernes, les données réactives et les propriétés calculées sont des concepts très importants. En tant que débutant Vue3, après avoir appris ces deux concepts, vous pourrez mieux comprendre les fonctionnalités et l'utilisation du framework Vue.

Cet article se concentrera sur l'explication des données réactives et des propriétés de calcul de Vue3, y compris leurs concepts de base, leur utilisation et leurs exemples. Si vous n'êtes pas encore familier avec Vue3, veuillez d'abord apprendre les bases de Vue3.

1. Qu'est-ce que les données réactives ?

Dans Vue3, les données réactives sont des données qui peuvent automatiquement suivre les modifications et mettre à jour la page immédiatement. Dans Vue3, les données réactives peuvent être des objets JavaScript ordinaires, des types de données primitifs, des tableaux, etc.

Utiliser des données réactives dans Vue3 est très simple, il vous suffit de définir les attributs correspondants dans l'objet de données. Le framework Vue effectuera la liaison des données en fonction de ces propriétés pour obtenir des fonctionnalités réactives.

Par exemple :

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue3!"
    };
  }
};
</script>

Dans le code ci-dessus, nous définissons un objet de données et y définissons un message d'attribut. Dans le modèle, nous utilisons l'expression de différence {{ message }} pour afficher cet attribut. Lorsque nous modifions la valeur du message, le contenu de la page sera automatiquement mis à jour.

2. Qu'est-ce qu'une propriété calculée ?

Dans Vue3, une propriété calculée est une propriété utilisée dans les modèles qui est calculée en fonction d'autres valeurs de propriété. La valeur d'une propriété calculée est mise en cache et n'est recalculée que lorsque la propriété dont elle dépend change.

L'utilisation des propriétés calculées dans Vue3 est également très simple. Il vous suffit de définir les propriétés correspondantes dans l'objet calculé. Chaque propriété d'un objet calculé doit être une fonction et renvoyer une valeur calculée.

Par exemple :

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

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

Dans le code ci-dessus, nous définissons deux attributs de données : firstName et lastName. Nous définissons également un attribut calculé fullName, qui calcule une nouvelle valeur, le nom complet, basé sur les valeurs de firstName et lastName. À ce stade, la valeur de fullName sera mise en cache et ne sera pas recalculée tant que firstName ou lastName ne sera pas modifié.

3. Exemples de données réactives et de propriétés calculées

Ce qui suit est un exemple simple qui montre comment utiliser des données réactives et des propriétés calculées pour implémenter une fonction de panier simple.

<template>
  <div>
    <div>商品列表：</div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} - {{ item.price }}元
        <button @click="addToCart(item)">加入购物车</button>
      </li>
    </ul>
    <div>购物车：</div>
    <ul>
      <li v-for="item in cart" :key="item.id">
        {{ item.name }} - {{ item.price }}元 - 数量: {{ item.quantity }}
        <button @click="removeFromCart(item)">x</button>
      </li>
    </ul>
    <div>总价: {{ totalPrice }}元</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: "苹果", price: 8 },
        { id: 2, name: "香蕉", price: 3 },
        { id: 3, name: "橙子", price: 5 }
      ],
      cart: []
    };
  },
  computed: {
    totalPrice() {
      return this.cart.reduce((total, item) => total + item.price * item.quantity, 0);
    }
  },
  methods: {
    addToCart(item) {
      const idx = this.cart.findIndex(e => e.id === item.id);
      if (idx === -1) {
        this.cart.push({ ...item, quantity: 1 });
      } else {
        this.cart[idx].quantity += 1;
      }
    },
    removeFromCart(item) {
      const idx = this.cart.findIndex(e => e.id === item.id);
      if (idx !== -1) {
        this.cart.splice(idx, 1);
      }
    }
  }
};
</script>

Dans le code ci-dessus, nous définissons un objet de données, qui contient deux attributs : articles et panier. items représente la liste de produits et cart représente le panier.

Nous définissons également un attribut calculé totalPrice pour calculer le prix total du panier en fonction du prix et de la quantité de chaque article dans le panier.

Enfin, nous avons également défini deux méthodes : addToCart et removeFromCart. addToCart est utilisé pour ajouter le produit spécifié au panier et RemoveFromCart est utilisé pour supprimer le produit spécifié du panier.

Lors de l'utilisation de ce composant, il nous suffit d'introduire et de transmettre des accessoires dans le composant parent, et Vue3 terminera automatiquement la liaison des données et le rendu des composants.

Résumé

Les données réactives et les propriétés calculées de Vue3 sont l'une des fonctionnalités essentielles du framework Vue3, et leur maîtrise est cruciale pour les développeurs Vue3.

Dans Vue3, les données réactives peuvent suivre automatiquement les modifications et mettre à jour la page immédiatement. Les attributs calculés peuvent calculer de nouvelles valeurs d'attribut​​en fonction d'autres valeurs d'attribut​​et mettre en cache les résultats du calcul.

Avec un exemple simple de panier d'achat, nous montrons comment utiliser les données réactives et les propriétés calculées de Vue3 pour implémenter une interface hautement dynamique. Si vous souhaitez mieux apprendre Vue3, veuillez l'étudier en combinaison avec la documentation officielle de Vue3 et d'autres articles connexes.

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!