Vue组件化中的data为什么必须是一个函数

了解Vue的朋友都知道在使用组件中
其中的data,必须是一个函数,不然就会报错,这是问什么 ,今天我们就来探究一下,这其中的缘由;

首先是设计好一个组件,如下:

 <div class="app">
       

        <h3>这三个组件对象不会相互影响,组件data() 是为一个方法的原因</h3>
         <btn1></btn1><btn1></btn1><btn1></btn1>
    </div>
	<template id="temp">
        <div>
            <div> {{count}} </div>

           <button><span @click="minus()">-</span></button>
           <button><span @click="add()">+</span></button>
           
           <div>div{添加用户} </div> 
        </div>

           
    </template>
    <script>
        Vue.component("btn1",{
            template:"#temp",
            data(){
                return{
                    count:0,
                }
            },
            methods:{
                add(){
                    this.count++;
                },
                minus(){
                    this.count--;
                },

            }
        })
    
    </script>
    <script>

        // 这是个实例对象,  this 是不能少的;
        var app = new Vue({
            el: '.app',

            data: {},
            methods: { },
            
        })
    </script>

\

结果是这样:

分别点击后:

可以发现这三个组件的复用并没有相互之间影响,这也是为什么data,必须是一个函数的原因了,

这里相当于每个组件函数都开辟了一个内存地址,所以不会相互影响;

这里或许有人问了,如果我要同时改变呢?
那又该怎么办呢

只需在最前面中将用const 声明一个ob对象,然后在data中返回;

const obj={count:0};

结果如下:,同时发生改变;

这里就要我们深刻理解const 的es6语法了

好了,完