vue组件中data必须是一个函数的原因

data:{
    name:"数据"
}

vue组件中data值不能为对象，因为对象是引用类型，组件可能会被多个实例同时引用。

多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。

1. 写组件必须用函数式   

都用函数式的data

data:function(){
    return{
        name:"数据"
    }
}

也就是在定义component时，必须使用function的方式。

个人理解：vue是组件化的，在使用每个组件定义的方法和属性（就是data的中各种值）应该具有他的局部作用域即单独组件内部使用，所有函数返回形式，使得每个组件中返回的属性和方法，互不干扰

data为函数，通过return 返回对象的拷贝，致使每个实例都有自己独立的对象，实例之间可以互不影响的改变data属性值。

函数式写法，推荐

data:function(){
    return{
        name:"数据"
    }
}

或者

data(){
    return{
        name:"数据"
    }

}

注:    

这里的function不能用【() => {}】[ 箭头函数 ] 代替，
    因为 箭头函数 没有自己的【this】，会往上一层找对象
    即： 
    function => this => vue对象      普通函数 this指向 vue对象
    ()=>{}   => this => 上一级对象     箭头函数this指向上一级对象