我想大家看到这个问题的时候；大家对于其回答应该是：因为对象是一个引用类型的; 当组件复用的时候 ; 数据对象都指向的是一个内存地址 ; 当其中一个组件修改data的数据时 ; 其他的组件中的data数据也会被修改 ; 如果是函数的话 , 每次生成的就是一个新的对象 ; 引用地址就不同 , 那么则不会出现这个问题
以上的回答也是我经常用的；直到前两天我去面试的时候：面试官说，你说的太片面了；这时候我才想到去研究一哈；一下就是我的理解；大家可以相互学习一下
其实这本身来说不是一个vue问题；而是一个js问题；可以去理解一下原型链；那我们就从对象和函数上进行分析
如果是《对象》
请看下面代码：
let Components = function () {
this.data = this.data
}
Components.prototype.data = {
a:'1',
b:'2'
}
var conponent1 = new Components()
var conponent2 = new Components()
conponent1.data.a = '12'
console.log(conponent1); // a=12
console.log(conponent2); // a=12
从以上代码中我们可以看出：实例1和2输出的结果都是12；其实在这儿的时候我们可以会有一些疑惑；我们在new一个对象的时候，不是重新创建了一个对象嘛？但是当我们去改变值时，为什么原型上的值还是被改变了呢？
其实我们在new的时候创建一个新的对象是没有错的；但是我们的data是构在造函数上的，也就是说：当data是对象时，是没有被改变的；（这儿大家可以通过实例去查看data，大家也就明白了）；这其实就是赋值了一个引用地址，没有创建一个新的对象（内存空间）
如果大家看上面的解释还是比较抽象的话；可以先研究一下原型/原型链
如果是《函数》
请看下面代码：
function Components() {
this.data = this.data()
}
Components.prototype.data = function () {
return {
a:'1',
b:'2',
}
}
var conponentA = new Components()
var conponentB = new Components()
conponentA.data.a = '12'
console.log(conponentA); // a=12
console.log(conponentB); // a=1
从以上代码我们可以看出；当data是一个函数的时候实例所返回的值是不一样的；如果大家在明白data为对象时的解释的话；这儿大家也就很好理解了；data为函数时会将其作为工厂函数返回一个全新的data对象，所以这就是为什么我们是vue中为什么要使用函数的原因了；
以上是我根据网上资料和自己实验得到的结果；如果有不对的地方欢迎大家指正！
