Comprendre data() dans Vue.js

Ce nouvel article s’inscrit dans la continuité. Il se concentre sur le bloc data(), qui permet de définir l’état initial de l’application, et que nous retrouvons au cœur de notre exemple concret : une interface Vue.js qui affiche et filtre une liste de vidéos musicales.

Dans l’article Présentation et introduction à Vue.js, nous avons découvert comment une page HTML pouvait devenir interactive grâce à Vue.js. Puis, dans Plonger dans Vue.js : le rôle de createApp() et ses composants internes, nous avons exploré comment l’ensemble de l’interface s’organise autour de createApp(), en combinant plusieurs blocs complémentaires.

Déclarer ce que l’interface doit savoir

Dans Vue.js, data() est le point de départ de la réactivité. C’est ici que l’on définit l’ensemble des données dont notre application a besoin pour fonctionner. Ces données peuvent être affichées dans l’interface, servir à des calculs, conditionner des affichages, ou encore être modifiées via des interactions.

data() ne contient pas du code exécutif. Il retourne un objet, et chaque propriété de cet objet devient une valeur réactive : si elle change, l’interface se met à jour automatiquement.

Un exemple simple : Hello Vue

Voici un exemple minimaliste montrant comment Vue lie une donnée à l’affichage, et réagit à sa mise à jour :

<div id="app">
  <h1>{{ message }}</h1>
  <button @click="message = 'Bonjour Vue !'">Changer le message</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  data() {
    return {
      message: 'Hello world'
    };
  }
}).mount('#app');
</script>

<div id="app">
  <h1>{{ message }}</h1>
  <button @click="message = 'Bonjour Vue !'">Changer le message</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
  data() {
    return {
      message: 'Hello world'
    };
  }
}).mount('#app');
</script>

Ce petit bloc suffit à illustrer l’essentiel : Vue affiche la valeur de message, et la met à jour instantanément dès qu’on la modifie. Aucun rafraîchissement, aucun document.querySelector : le lien est direct, et automatique.

Dans notre application vidéo : champs, filtres, états d’affichage

Dans l’application de gestion de vidéos, data() joue un rôle central. On y trouve notamment :

data() {
  return {
    searchQuery: '',
    videos: [],
    formVisible: false,
    selectedGenre: null,
    feedback: ''
  };
}

data() {
  return {
    searchQuery: '',
    videos: [],
    formVisible: false,
    selectedGenre: null,
    feedback: ''
  };
}

Ces données contrôlent directement l’interface :

• searchQuery est lié à un champ texte par v-model, pour filtrer les vidéos.
• videos contient les données récupérées depuis l’API.
• formVisible déclenche l’ouverture ou la fermeture d’un formulaire (via v-if).
• feedback affiche un message conditionnel à l’utilisateur.

Vue établit des ponts entre le JavaScript et le HTML. Par exemple :

<input v-model="searchQuery" placeholder="Rechercher...">
<div v-if="formVisible">Formulaire affiché ici</div>

<input v-model="searchQuery" placeholder="Rechercher...">
<div v-if="formVisible">Formulaire affiché ici</div>

Dès qu’on tape dans le champ, la valeur de searchQuery change, ce qui active en cascade les filtres côté computed. L’état est centralisé, réactif, et sans logique manuelle.

Cas particuliers et bonnes pratiques

Même si on pourrait croire qu’un simple objet suffirait, Vue attend une fonction qui retourne un objet. Cela garantit que chaque instance possède son propre jeu de données. C’est fondamental pour éviter les effets de bord dans des composants réutilisables.

data() {
  return {
    count: 0
  };
}

data() {
  return {
    count: 0
  };
}

Pas de fonctions ou d’objets complexes directement liés

Les fonctions ne doivent pas être stockées dans data. Placez-les plutôt dans methods. De même, évitez les références circulaires ou objets liés à l’état global de l’application (authentification, config serveur…) sans précaution.

L’ordre n’a pas d’importance, mais l’intention oui

Les valeurs déclarées dans data peuvent être utilisées dans methods, computed, ou même watch. Elles constituent la source observable de votre application.

Conclusion

data() est le socle de l’application Vue. C’est là que nous définissons ce que l’interface doit connaître, suivre et afficher. Chaque valeur que nous y plaçons devient réactive : Vue la surveille, la lie à la vue, et met à jour l’interface dès qu’elle change.

Ce bloc simple dans sa syntaxe est essentiel dans sa portée : il structure l’état interne, donne corps à l’interface, et permet à Vue d’orchestrer tous les autres comportements. Sans lui, aucune interaction fluide ne serait possible.