vue组件data为什么必须是一个函数

首先组件是什么

组件就是自定义标签，它是Vue中核心功能之一，是把页面当中可以重复使用的内容进行封装，方便调用

在Vue中，我们可以发现，组件中的data数据返回的是一个函数，而不是对象

new Vue({
        el:"#fyc",
        data:{
        },
        components:{
        "add":{
            template:"
{{text}}
",
            data(){
                return {
                    text:"数据"
                }
            }
            }
    }
    })

接下来我们通过js原型链来分析一下
data为对象时：

 var component=function(){};  
    // data为对象
    component.prototype.data={
        text:"data为对象的数据"
    }
    var component1=new component();
    var component2=new component();
    console.log(component2.data.text)  //输出  data为对象的数据
    component1.data.text="修改了数据";
    console.log(component2.data.text)  //输出  修改了数据

data为函数时：

var component=function(){};  
    // data为函数
    component.prototype.data=function (){
        return {
            text:"data为函数的数据"
        }
    };
    var component1=new component();
    var component2=new component();
    console.log(component2.data().text)  //输出  data为函数的数据
    component1.data().text="修改了数据";
    console.log(component2.data().text)  //输出  data为函数的数据

从以上对比，我们可以发现,data为对象时，两个实例是互相影响的，其中一个的数据改变另一个也会改变，data为函数时则不会，因为函数都有自己的独立作用域，互不影响

总结

组件是可以重复使用的，在多处使用时，如果data是一个对象，当改变其中的一个值时，其他地方使用的也会跟着改变，组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一个会影响其他，data是一个函数的话，函数具有自己的作用域