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

vue组件中data值不能为对象，因为对象是引用类型，组件可能会被多个实例同时引用。如果data值为对象，将导致多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。

上面解释了data不能为对象的原因，这里我们简单说下data为函数的原因。data为函数（有自己独立的作用域），通过return 返回对象的拷贝，致使每个实例都有自己独立的对象，实例之间可以互不影响的改变data属性值。

 

这并非是 Vue 自身如此设计，而是跟 JavaScript 特性相关，我们来回顾下 JavaScript 的原型链：

var Component = function() {};
Component.prototype.data = {
    message: 'Love'
}
var component1 = new Component(),
    component2 = new Component();
component1.data.message = 'Peace';
console.log(component2.data.message);  // Peace

以上两个实例都引用同一个对象，当其中一个实例属性改变时，另一个实例属性也随之改变，只有当两个实例拥有自己的作用域时，才不会互相干扰

var Component = function() {
    this.data = this.data()
}
Component.prototype.data = function(){
    return {
        message: 'Love'
    }
}
var component1 = new Component(),
    component2 = new Component();
component1.data.message = 'Peace';
console.log(component2.data.message); //Love

总结：

综上可知，如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

所以说vue组件的data必须是函数。这都是因为js的特性带来的，跟vue本身设计无关。

js本身的面向对象编程也是基于原型链和构造函数，应该会注意原型链上添加一般都是一个函数方法而不会去添加一个对象了。