Explain the details of why the data option in Vue's component must be a function

Official explanation

data must be a function

Most of the various options passed in when constructing Vue instances can be used in components. There is only one exception: data must be a function. Actually, if you do:

('my-component', {
 template: '<span>{{ message }}</span>',
 data: {
 message: 'hello'
 }
})

Then Vue will stop running and issue a warning in the console to tell you that data must be a function in the component instance. But it is also very beneficial to understand why this rule exists, so let's cheat first:

&lt;div &gt;
 &lt;simple-counter&gt;&lt;/simple-counter&gt;
 &lt;simple-counter&gt;&lt;/simple-counter&gt;
 &lt;simple-counter&gt;&lt;/simple-counter&gt;
&lt;/div&gt;
var data = { counter: 0 }
('simple-counter', {
 template: '&lt;button v-on:click="counter += 1"&gt;{{ counter }}&lt;/button&gt;',
 ```
 // Technically data is indeed a function, so Vue will not warn. // But we return a reference to the same object to each component instance ```
 data: function () {
 return data
 }
})
new Vue({
 el: '#example-2'
})

================ The following is personal understanding. If there is any error, please point it out. Thank you for your advice.

('xxx',{
template:'{{counter}}',
data:function(){
return counter=0;
}
})

Vue has its own scope when registering to global/local and generating instances, that is,

If a variable name is consistent with the VUE instance's variable name in the template string template, the variable will only be a variable in the component, not a global variable of the VUE

for example

//In the following code, the count in the component and the count in Vue are the same variable name, but only 0 is displayed instead of 2 in the component('simple-counter',{
    template:'&lt;button&gt;{{count}}&lt;/button&gt;',
    data:function(){
     return count=0;

    }

   });
   vm=new Vue({
    el:'#example-2',
    data:{
     count:2

    }

   })

The above code is understood from the prototype chain

var component=function(){}//In order for the component to have its own scope, it must contain the private variable data, so the simplified understanding should be like this
var component=function(){
=();//There is a private data attribute}

=function(){
return {count:0}
}
//When we use data in template, we call the private variable data of the component we call//What if we don't handle it in the form of a function?var component=function(){
//There is no private data attribute}
= {count:0}
//At this time, if data is not used as a private variable, there will be a risk of exposure. Moreover, it points to a reference of {count:0}, so when the component is repeatedly created, the data of the component points to the same reference.  Therefore, it will affect each other.

If it is not processed in the form of a prototype chain, it is also possible to not pass in the function

function component(d) {

     = d;
   }
var com = new component({
    count: 1
   });
   var com1 = new component({
    count: 1
   });

Summarize

This is the article about why data options in Vue components must be functions. For more related Vue components, please search for my previous article or continue browsing the related articles below. I hope you support me in the future!