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

1.组件化一个计数器功能

在+button上绑定increase的点击事件，触发increase事件，让counter加1
在-button上绑定decrease的点击事件，触发decrease事件，让counter减1

        <div id="app">
            <cpn1></cpn1>
            <cpn1></cpn1>
            <cpn1></cpn1>           
        </div>
        <template id="cpn1">
            <div>
                <h2>当前计数器：{{counter}}</h2>
                <button @click="increase">+</button>
                <button @click="decrease">-</button>                
            </div>

        </template>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            Vue.component('cpn1',{
                template:'#cpn1',
                data(){
                    return {
                        counter:0
                    }
                },
                methods:{
                    increase(){
                        this.counter++;
                    },
                    decrease(){
                        this.counter--;
                    }
                }
            })
            
            const app = new Vue({
                el: '#app'
            })
        </script>

各个组件化出的计数器互不影响

2.为什么组件中的data必须是个函数

首先：data若是个对象的话，会报错
data是个对象

image.png
image.png

那么手动让data返回的是一个对象

image.png

这么写就相当于data函数返回的都是同一个对象，和下面写法的效果一样

image.png
再测试计数器
三个计数器不会相互独立，操作其中一个全部同时改变。
image.png

这是因为三个Vue组件实例共享的是同一个对象中的数据，所以当数据变化时，所以的Vue实例都同步变化

image.png

所以组件中的data必须是个函数，函数中return出的对象都是独立的，每实例化一个组件，该组件就会获取一个独立的data对象，即三个计数器组件实例获取的是三个return出的data对象，所以三个计数器功能互不影响。

image.png