在创建或注册组件模板的时候，data 必须是函数，而不能直接把一个对象赋值给它

而在 new Vue() 的时候，却可以给 data 直接赋值为一个对象。

这是为什么呢？

解释：

1. 需要理解：new Vue() 是创建一个组件实例，而创建或注册组件模板实际是建立一个组件构造器constructor() 的引用

    所以，注册组件其实并不产生新的组件类，但会产生一个可以用来实例化的新方式
   

2. 核心原因：原型链

    var MyComponent = function() {}
    MyComponent.prototype.data = {
        a: 1,
        b: 2,
    }
   

   上面是一个虚拟的组件构造器，真实的组件构造器方法很多

    var component1 = new MyComponent()
    var component2 = new MyComponent()
   

   上面实例化出来两个组件实例，也就是通过 <my-component> 调用，创建的两个实例

    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()，应该叫 setData 或其他更容易立即的方法名