Fonction data() de Vue3

Vue3 选项式 APIVue3 API des options

Dans Vue3,data()la fonction est l’une des fonctions principales utilisées pour définir l’état interne (données) d’un composant.

data()La fonction renvoie un objet, et les propriétés de cet objet sont les données internes du composant, auxquelles on peut accéder et que l’on peut manipuler via des templates ou une autre logique.

data()La fonction est une partie importante de chaque composant Vue, grâce à laquelle l’état des données du composant peut être initialisé.

Utilisation de base de la fonction data()

Dans Vue3,data()la fonction est généralement définie comme une fonction et renvoie un objet. Cet objet contient les propriétés de données requises par le composant.

Exemple de code

Exemple

export default {
  data() {
    return {
      message: 'Hello, Vue3!',
      count: 0
    };
  }
};

Explication

  • data()La fonction renvoie un objet contenant deux propriétés :
    • message: une donnée de type chaîne, avec une valeur initiale de'Hello, Vue3!'。
    • count: une donnée de type numérique, avec une valeur initiale de0。
  • Ces données peuvent être utilisées directement dans le template ou les méthodes du composant.

Pourquoi data() est-elle une fonction ?

Dans Vue3,data()doit être une fonction, plutôt que de renvoyer directement un objet. En effet, les composants Vue peuvent être réutilisés plusieurs fois. Sidata()est un objet, alors toutes les instances partageront le même objet de données, ce qui entraîne des conflits de données.

Endata()En le définissant comme une fonction, chaque fois qu'une instance de composant est créée, Vue appelle cette fonction et renvoie un nouvel objet de données, garantissant ainsi que les données de chaque instance sont indépendantes.

Exemple

Exemple

export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    };
  }
};
  • Chaque fois qu'une instance de composant est créée,data()la fonction est appelée, renvoyant de toutes nouvellesmessagedonnées.

Caractéristiques de la fonction data()

1. Données réactives

data()Les propriétés de l'objet retourné sont converties en données réactives par Vue. Lorsque ces données changent, Vue met automatiquement à jour les vues qui en dépendent.

2. Initialisation des données

data()La fonction est appelée lorsque le composant est instancié pour initialiser l'état des données du composant.

3. Isolation des données

Puisquedata()c'est une fonction, chaque instance de composant possède un objet de données indépendant, évitant le partage et les conflits de données.

Remarques sur la fonction data()

1. Ne pas utiliser de fonctions fléchées

data()La fonction ne peut pas être une fonction fléchée, car les fonctions fléchées n'ont pas leur proprethiscontexte, ce qui entraînera un accès incorrect à l'instance du composant.

Exemple incorrect：

Exemple

export default {
  data: () => ({
    message: 'Hello, Vue3!'
  })
};

Exemple correct：

Exemple

export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    };
  }
};

2. Éviter de modifier directement les propriétés de l'instance Vue

Dansdata()Dans la fonction, ne modifiez pas directement les propriétés de l'instance Vue (telles quethis.$data), mais définissez data en renvoyant un objet.

Exercice pratique

Essayez de créer un composant Vue, et dansdata()la fonction, définissez les données suivantes :

  • username: la valeur initiale est une chaîne vide''。
  • age: la valeur initiale est0。
  • isStudent: la valeur initiale estfalse。

Exemple

<template>
  <div>
    <h1>Informations utilisateur</h1>
    <p>Nom d'utilisateur : {{ username }}</p>
    <p>Âge : {{ age }}</p>
    <p>Est étudiant : {{ isStudent ? 'Yes' : 'No' }}</p>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
name: 'UserInfo', // nom du composant
  data() {
    return {
username: '', // la valeur initiale est une chaîne vide
age: 0, // la valeur initiale est 0
isStudent: false // la valeur initiale est false
    };
  }
});
</script>

<style scoped>
/* Styles optionnels */
h1 {
  color: #2c3e50;
}
p {
  font-size: 16px;
}
</style>

Vue3 选项式 APIVue3 API des options

Autres extensions