前言

在我们使用vue的时候，组件这个功能一定是大家都会去接触到的，这也是vue这个js框架的优势之一。但是在使用的时候我们会发现一个问题，在文档中作者明确地表明了data必须是函数，那么这是为什么呢？

原来是js的锅

我们知道，组件出现的目的就是为了把页面中的每一个部分都模块化，方便处理或复用。当一个组件被多次复用时，我们肯定希望组件中的数据是各自独立不受干扰的。但是由于js的特性所致，存储数据的对象是复杂数据类型，需要存放在堆中，对一个对象的引用其实只是对该对象地址的引用而已。那么这样就会造成一个情况，假如某个对象的引用修改了这个对象上某个属性的值，就会导致在这个对象的其他引用上的该属性的值也会随之发生改变，这并不是我们想要的结果。
举个例子：

var component = function() {};
component.prototype.data = {
  a: 'axx',
  b: 'bxx'
};
var test1 = new component();
var test2 = new component();
console.log(test1.data.a); //axx
console.log(test2.data.a); //axx
test1.data.a = 'xxx'
console.log(test1.data); //xxx
console.log(test2.data); //xxx

在上面的代码中，test1与test2都是component的实例，其实test1改变了component的data上面a的值，但是b并没有随着更改。可是再次打印的时候我们发现，b的值却也跟着变了

如何解决

var component = function() {
    this.data = this.data()
};
component.prototype.data = function (){
    return {
        a: 'axx',
        b: 'bxx'
    }
}
var test1 = new component(); //axx
var test2 = new component(); //axx
console.log(test1.data);
console.log(test2.data);
test1.data.a = 'xxx'
console.log(test1.data); //xxx
console.log(test2.data); //axx

如果我们使用调用函数返回值的方法，就可以确保每个实例所引用的data属性是各不相同的一份，从而不会发生自身数据被其他组件所干扰的情况，所以在vue中的data才会要求我们写成函数返回值的形式