vue组件中的data为什么是一个函数而不是对象？

原因：对象为引用类型

引用类型解释：

var a = {a:1,b:2}
var b = a
var c = a
var d = a
var e = a
var f = a
var g = a
...

b.a = 10
console.log(c.a) // 输出10，由于上面b把这个值改成10了， 这个时候c.a也等于10了
// 引用类型就是把a这个引用类型的变量赋值给新的b变量，这个b变量做的任何修改都会对a产生影响，导致了这个c,d,e,f...用到a这个值的变量都有影响

在使用vue的过程中我们会出现两种使用场景

1: 实例化vue

new Vue( {
    data : {
      title : "title"
    }
});
// 这种情况下，data是对象

2: 创建vue组件生成器(编写vue组件时)

Vue.component( 'name', Vue.extend({
  data : function() {
    return {
    	title : 'title'
    };
  }
}));
// 这种情况下，data是function

当vue的组件重用的时候，如果使用对象的形式来用，会发生什么问题呢，边看代码边解释吧

// 以下浅析，不深入vue组件实例化的实际过程
function LikeVue(data) { // 比如这个就是vue构造函数
	this.data = data
}
var data = {
	a:1,
	b:2
} // 在vue中 这个对象的取值就是你在代码中写的那个data

var vm1 = new LikeVue(data) 
var vm2 = new LikeVue(data) // 在组件复用的时候每一个组件都会实例化vue

vm1.data.a = 10 // 当vm1组件中把数据中的a变成10后
console.log(vm2.data.a) // 10, vm2中data的a也变成了10，这就是为什么不能直接写成一个对象的原因

上面的例子可以试着将data换成function的形式，看看有什么区别就能理解了

为仕么要在组件中写成function

因为组件可能被用来创建多个实例。如果 data 仍然是一个对象，则所有通过该组件实例化的vue将共享这一个 data 对象，改为 data 函数，每次创建一个新实例后，vue 都是调用 data 函数，从而返回新的一个对象。

ps：补充知识点

function Obj(){
	return {
		a:1,
		b:1
        }
}
Obj() === Obj() // false