VUE自定义组件data引用方式的理解

自定义组件

在学习vue自定义组件时,对比定义全局vue和自定义组件时,关于data值产生疑惑：
为什么自定义组件在利用时,data变量引用方式为函数引用

Vue.component("this",{
                template:'#info',
                methods:{
                    add(){this.number++}
                },
                data:function(){
                        return{ number:0}
                    }
            })

阅读文档得知
当多个实例引用同一个对象的时候，只要其中一个实例对该对象进行操作的话，其他实例中的数据也会发生变化；而在Vue中更多的是组件复用思想，需要每个组件都有该组件自己的数据，这样组件之间才不会相互影响干扰。因此，Vue组件中的数据不能写成对象的形式，要写成函数的形式；组件中data写成一个函数，数据以函数返回值来定义，每次组件复用的时候就会返回一个新的data，这样每个组件都有属于该组件的专有空间，各个组件有各自的数据，这样就不会干扰其他组件的运行操作。

所以决定进行测试：

<div id='app'>
        <this></this>
        <this></this>
        <this></this>
    </div>

    <template id='info'>