Vue组件里面data为什么必须是个函数 Vue组件里面data为什么必须是个

在创建或注册模板的时候，传入一个data属性用来绑定数据，但是在组件中，data必须是一个函数，而不能直接把对象赋值给它。

export default {
name:'app',
data(){
return {

}
},
methods:{
}
}
上面的组件，是一个简易操作，实际上它首先需要创建一个组建构造器，然后注册组件，注册组件的本质其实就是建立一个组件构造器的引用，使用组建才是真正创建一个组件实例。所以，注册组件其实并不产生新的组件类，但会产生一个可以用来实例化的新方式。

理解这点之后，再理解js的原型链：
var MyComponent=function(){}
MyComponent.prototype.fata={
a:1,
b:2
}
上面是一个虚拟的组件构造器，真是的组件构造器方法很多。
var component1=new MyComponent();
var component2=new MyComponent();
上面代码实例化出来两个组件实例，也就是通过调用，创建两个实例（vue里面组件可以在任何地方多次当子组件引入）。
component1.data.a=component2.data.a//true
component1.data.b=5
component2.data.b//5
上面代码中比较坑，如果两个实例同时引用了一个对象，那么当你修改其中一个属性的时候，另一个实例也会跟着修改，，两个实例应该各自有各自的域才对，所以需要通过下面的方式处理：
var MyComponent=function(){
this.data=https://www.it610.com/article/this.data();
}
MyComponent.prototype.data=https://www.it610.com/article/function(){
return {
a:1,
b:2,
}
}
这样每一个实例的data属性都是独立的，不会互相影响。所以vue组件里面的data必须是一个函数，这是因为js本身的特性带来的，跟vue本身设计无关，其实vue不应该把方法名叫data(),而应该叫setData()更形象。