Explication détaillée de la raison pour laquelle les données des composants Vue ne peuvent renvoyer que des fonctions

La plupart des différentes options transmises via le constructeur Vue peuvent être utilisées dans le composant. Seule l'option data est différente. Dans le constructeur Vue, data renvoie un objet, mais une fonction doit être renvoyée dans le composant. pourquoi ? Cet article présente principalement une explication détaillée de la raison pour laquelle les données du composant Vue ne peuvent renvoyer que des fonctions. L'éditeur pense que c'est assez bon, et maintenant je vais le partager avec vous et lui donner une référence. Suivons l'éditeur et jetons un œil.

Regardons d'abord l'exemple suivant :

HTML:<p id="example-2">
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
  <simple-counter></simple-counter></p>JS:var data = { counter: 0 }
Vue.component(&#39;simple-counter&#39;, {
  template: &#39;<button v-on:click="counter += 1">{{ counter }}</button>&#39;,  // 技术上 data 的确是一个函数了，因此 Vue 不会警告，
  // 但是我们返回给每个组件的实例的却引用了同一个data对象
  data : data})new Vue({
  el: &#39;#example-2&#39;})

这段代码本来的想法是，点击某个按钮然后那个按钮的值加一，但是因为所有按钮都使用同一个counter值，导致每次点击一个按钮，其他按钮的只也会加一，这是不允许的，每个组件模板不应该相互影响。
那么如何解决这个问题呢？

我们可以通过为每个组件返回全新的 data 对象来解决这个问题，例如：

data: function () {
  return {
    counter: 0
  }
}

那这个其中原理是什么？

这个其实不关Vue的事情，这是js本身的一种特性造成的。当两个实例继承同一个对象的时候么当你修改其中一个属性的时候，另外一个实例也会跟着改。例如：

var MyComponent = function() {}
MyComponent.prototype.data = {
  a: 1,
  b: 2,
}var component1 = new MyComponent()var component2 = new MyComponent()

component1.data.a === component2.data.a // truecomponent1.data.b = 5component2.data.b // 5

Ceci est déterminé par le js. mécanisme d'héritage. Pour ceux qui ne comprennent pas, vous pouvez lire mon autre article sur l'héritage js

Résumé :
En fait, l'héritage ES5 est très dégoûtant, donc ES6 a amélioré l'héritage et introduit les concepts de classe, d'extension et de super. Si vous voulez en savoir plus, allez en savoir plus

Connexe. recommandations :

Pourquoi les données de vue sont une fonction

La raison pour laquelle les données de vue le composant doit être écrit sous forme de fonction

les données dans vue doivent être une fonction

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!