Do you know why vue data is a function?

Official website explanation: When a component is defined, data must be declared as a function that returns an initial data object, because the component may be used to create multiple instances. If data remained a pure object, all instances would share a reference to the same data object! By providing a data function, each time a new instance is created, we can call the data function to return a fresh copy of the initial data object. When I saw this question, an interviewer asked me during an interview. I was confused at the time and never thought about why. I just knew that the code needed to be written like this. I will come back to learn more about the principles of this part when I have time recently. There are two that I prefer to answer.

1. It is to avoid data pollution caused by sharing the same data when repeatedly creating instances

2. The reason for writing a function is to ensure that the object is independent. If you can ensure that the object is unique, you can write the object directly without writing a function.

In fact, it all comes down to avoiding data pollution.

If we want to solve this problem, we have to talk about the prototype chain and this.

You can learn the relevant knowledge on your own. Objects share common properties and methods in the prototype chain.

Person1 and person2 are references to Person, so when person2 changes its data, it is actually Person's data that is changed. Since the data of Person has changed, the reference of Person1 will also be changed.

function Person(){
 }
 Person.prototype.datas={
   a:"c",
   f:'h'
 }
 var person1 = new Person()
 var person2 = new Person()
 person2.datas.a="wewew"
 console.log(person2)
 console.log(person1) 

I have always had a question: since person1 and person2 are both references to Person, why does putting them in an object cause data pollution but putting them in a method does not? First of all, you need to know one thing: the direction of this cannot be determined when the function is defined. Only when the function is executed can we determine who this actually points to. In fact, this points to the object that calls it. I have another question. Why are there different results when they are pointing to the same method? Did he clone one? Answer: A method defined inside a constructor will be cloned on each of its instances; a method defined on prototype property of a constructor will make all its instances share this method, but will not redefine the method reference inside each instance: https://www.jb51.net/article/199830.htm

function Person(){
    this.datas = this.sayHello() //this refers to the object that calls it}
  Person.prototype.sayHello = function () {
      return {
        d:1,
        b:2
      }
    };
  var person1 = new Person()
  var person2 = new Person()
  person2.datas.d="wewew"
  console.log(person1)
  console.log(person2) 

The specific examples are as follows

1. In normal state, when using the data function, no data pollution is caused

<em id="__mceDel">ButtonTest.vue<br><template>
  <div>
    <div>{{ count }}</div>
    <button @click="onAdd">Add</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    onAdd() {
      this.count++;
    },
  },
};
</script><br></em>

Home.vue
<template>
  <div class="home">
    <button-test></button-test>
    <button-test></button-test>
  </div>
</template>
 
<script>
import ButtonTest from "@/components/ButtonTest.vue";
export default {
  name: "Home",
  components:
    ButtonTest,
  },
};
</script> 

2. If data is directly defined as an object, an error will be reported

3. Define the form of an external object, and then click a button, and two data are added at the same time, causing data pollution

So far, this article is about why vue data is a function? This is the end of the article. For more relevant vue data function content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!