Vue组件的data的函数

在使用vue开发时，data通常都是一个Object。而在创建Vue组件时，官文文档要求data必须是一个函数，并推荐以下形式：

    data(){
        return {}
    }

开始不是很明白，官方给了例子。说实话因为自己反应比较慢，开始没怎么理解意思。后面看了别人的分析才明白。

其实官方例子的意思是：Vue组件中，如果data是一个对象，多个组件在使用时，就相当于引用了同一个data对象，这样的话组件之间数据就会共享，并会相互影响。而当我们通过函数返回一个对象，这样组件之间数据是有各自作用域，而不会相互影响。而尤大这样做，也是因为js语言自己的问题。

js的继承

Vue组件的使用，是需要通过Vue组件实例的Component进行注册。在注册后，自定义组件对象会被构造成Vue组件。而在相同的Vue中注册的组件，他们被相同的构造器构造，继承的特性也一样。js的继承是原型继承，不同的实例继承相同的对象，那不同实例之间继承的属性就会共享，一个修改另一个也被修改。

let Component = function(){}
Component.prototype.data = {}

let cp1 = new Component(),
cp2 = new Component()

cp1.data === cp2.data // true

此时,cp1和cp2内部的data就是共用的。
而当使用函数时,原型上的data是函数，并将各自的实际data对象赋予实例对象。

let Component = function(obj){
    // 对需要构造的组件对象进行处理
    this.data = obj.data()
}
Component.prototype.data = function(){
    return {}
}

let cp1 = new Component({ data: function(){ return {} } }),
cp2 = new Component({ data: function(){ return {} } })

cp1.data === cp2.data // false

这样不同的实例data引用不同，不会共享。
Vue的data原文

当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。