为什么组件中的data属性必须定义为一个方法并返回一个对象

三个数字会同时增长

<div id="app">
    <my-com></my-com>
    <my-com></my-com>
    <my-com></my-com>
</div>

var msg = {
    count: 0
};
Vue.component('myCom', {
    template: '#myTem',
    data: function () {
        return msg;
    },
    methods: {
        add: function () {
            this.count++;
        }
    }
});

如果每个组件，都返回一个自己的对象，则不会有这样的问题。

组件会被用来创建多个实例，如果data是个纯粹的对象，那么所以实例将会引用同一个数据对象。所以每个组件都返回了一个新的初始变量，这样组件间不会互相干扰。

Vue.component('myCom', {
    template: '#myTem',
    data: function () {
        return {
            count: 0
        }
    },
    methods: {
        add: function () {
            this.count++;
        }
    }
});