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

转载于:https://www.cnblogs.com/learnings/p/10442309.html