Detailed explanation of why data in Vue components can only return functions

Most of the various options passed in through the Vue constructor can be used in the component. Only the data option is different. In the Vue constructor, data returns an object, but a function must be returned in the component. why? This article mainly introduces and explains in detail why the data in the Vue component can only return functions. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

Let’s take a look at the following example:

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

This is determined by the js inheritance mechanism. If you don’t understand, you can read my other article about js inheritance. Article

Summary:
In fact, ES5 inheritance is very disgusting, so ES6 has improved inheritance and introduced the concepts of class, extends, and super. If you want to know more about it, go and learn about it

Related recommendations:

Why vue’s data is a function

The reason why data in the vue component must be written as a function

data in vue must be a function

The above is the detailed content of Detailed explanation of why data in Vue components can only return functions. For more information, please follow other related articles on the PHP Chinese website!