在了解vue组件组件中的data为什么必须是个函数时，我们先考虑一个问题，vue中的data可以是一个对象吗？
答案是： 可以！
在vue的实例中data其实是可以是一个对象的
在vue的源码中我们可以看到：
function initData (vm: Component) {
var data = vm.$options.data;
data = vm._data = typeof data === 'function'
? getData(data, vm)
: data || {};
if (!isPlainObject(data)) {
data = {};
process.env.NODE_ENV !== 'production' && warn(
'data functions should return an object:\n' +
'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
vm
);
}
}
vue是支持将一个对象作为vue构造参数中data属性的值
但组件中data为什么是一个函数呢？
首先我们看看官方的解释
vue组件中的data数据都应该是相互隔离，互不影响的，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响，就需要通过data函数返回一个对象作为组件的状态。
当我们将组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，拥有自己的作用域，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。
举例：
const MyComponent = function( ) {};
MyComponent.prototype.data = {
a: 1,
b: 2,
}
const component1 = new MyComponent();
const component2 = new MyComponent();
component1.data.a === component2.data.a; // true
component1.data.b = 5;
component2.data.b // 5
如果两个实例同时引用一个对象,那么当你修改其中一个属性的时候，另外一个实例也会跟着改；
但如果data是一个函数的话, 且使用return返回一个对象; 这就使得每复用一次组件就会返回一个全新的data,其他复用地方组件的data数据不受影响,保证了数据的独立性和复用性
总结
1.在Vue中根实例的data可以是对象也可以是函数, 但是在组件中的data必须要是一个函数, 组件就是可以复用的Vue实例, 把公共的模块抽离出来, 达到复用和直接使用的效果.
2.如果data是一个对象的话, 对象是一个引用类型; 它会在堆空间中开辟一片区域, 将内存地址存入. 这就使得所有的组件公共一个data, 当一个组件中修改了data中的数据就会出现一变全变的现象.
3.如果data是一个函数的话, 且使用return返回一个对象; 这就使得每复用一次组件就会返回一个全新的data,其他复用地方组件的data数据不受影响,保证了数据的独立性和复用性
