En utilisant Vue, vous pourriez sûrement vous poser la question «pourquoi les données doivent-elles être une fonction qui renvoie un objet, et pas seulement un objet?
En utilisant Vue, vous vous posez sûrement la question «pourquoi faut-ildata
être une fonction qui renvoie un objet, et pas seulement un objet? »
<template>
<a v-on:click="counter = counter + 1">{{counter}}</a>
</template>
<script>
export default {
data: function() {
return {
counter: 0
}
}
}
</script>
Surtout compte tenu du fait que dans certains endroits,data
estne pasune fonction, comme vous le voyez probablement dans le composant App dans plusieurs exemples.
L'explication est que lorsque le composant est utilisé plusieurs fois, si ce n'est pas une fonction, mais un objet régulier, comme ceci:
data: {
counter: 0
}
puis à cause du fonctionnement de JavaScript,chaque instance du composant partagera cette propriété.
Ce n'est pas ce que vous voulez dans 99,9% des cas, et à la place vous devez faire:
data: function() {
return {
counter: 0
}
}
Cela peut être non intuitif au début, mais une fois que vous acceptez cette explication et que vous apprenez que c'est un peu nuisible pour votre application, et une source possible de bogues, vous vous souviendrez de toujours utiliser une fonction pour les données.
Téléchargez mon gratuitManuel de Vue
Plus de tutoriels vue:
- Un aperçu de Vue.js
- La CLI Vue.js: apprenez à l'utiliser
- Les DevTools Vue.js
- Configurer VS Code pour le développement Vue
- Créez votre première application avec Vue.js
- Composants de fichier unique Vue.js
- Modèles et interpolations Vue.js
- Directives Vue.js
- Méthodes Vue.js
- Propriétés calculées Vue.js
- Styliser les composants Vue.js à l'aide de CSS
- Observateurs Vue.js
- Méthodes Vue vs observateurs vs propriétés calculées
- Filtres Vue.js
- Composants Vue.js
- Machines à sous Vue.js
- Accessoires de composants Vue.js
- Événements Vue.js
- Communication des composants Vue.js
- Vuex, le gestionnaire d'état de Vue.js
- Vue, utilisez un composant à l'intérieur d'un autre composant
- Vue, comment utiliser un accessoire comme nom de classe
- Comment utiliser SCSS avec les composants de fichier unique Vue.js
- Utilisation de Tailwind avec Vue.js
- Le routeur Vue
- Afficher dynamiquement un composant Vue
- La feuille de triche Vue.js
- Stocker les données Vue sur localStorage à l'aide de Vuex
- Comment appliquer dynamiquement une classe à l'aide de Vue
- Vue, comment utiliser v-model
- Vue, pourquoi les données doivent être une fonction
- Roadmap to become a Vue.js developer in 2020