Vue, pourquoi les données doivent être une fonction

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,dataestne 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

Vue, pourquoi les données doivent être une fonction

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?

Plus de tutoriels vue: