朋友，当你提出以上问题的时候建议你先去复习下原型链的知识
但是我好人做到底直接就讲了吧，我们先看一下下面的这段代码：
function Component () {
this.data = this.data
}
Component.prototype.data = {
name: ‘卡莲‘，
gender: ‘女‘
}
以后再放链接：
我们来分析一下假如是以下这种情况：
function Component(){
}
Component.prototype.data = {
name:‘卡莲‘,
gender: ‘女‘
}
var componentA = new Component();
var componentB = new Component();
componentA.data.gender="男";
console.log(componentA,componentB)
说好只改变其中一个卡莲的性别，但是卡莲们不分彼此，公用一个接受信号的大脑，同时接收到了变成“男”的信号，结果他们都变成了“男”。
所以Vue需要function的帮助，每次都可以new出独立思考的，拥有独立大脑的卡莲，这次我们再尝试再发出一次信号：
function Component(){
}
Component.prototype.data = function () {
name:‘卡莲‘,
gender: ‘女‘
}
var componentA = new Component();
var componentB = new Component();
componentA.data.gender="男";
console.log(componentA,componentB)
太好了，舰长大人，卡莲A是男，卡莲B是女，我们成功了。
【Vue】淘气三千问之 data为什么是函数而不是对象？这河狸吗
原文：https://www.cnblogs.com/0902-zjq/p/15340557.html