vue组件中的data为什么是一个函数

同一个组件被多次复用，会创建多个实例。这些实例用的是同一个构造函数，如果data是一个对象的话，所有的组件共享同一个对象。为了保证组件的数据独立性，要求每个组件必须通过data函数返回一个对象作为组件的状态。

一个组件被多次使用，用的是同一个构造函数。为了保证组件的不同实例的data不冲突，要求data必须是一个函数，这样组件间不会互相影响。

为了防止被公用。导致组件不独立。

主要是为了避免组件间的数据互相影响。谁new就是谁的实例，互不影响。

如果data是对象：

function VueComponent(){
}
VueComponent.prototype.$options = {
  data: {name: 'zf'}
}
let vc1 = new VueComponent();
vc1.$options.data = 'jw';
let vc2 = new VueComponent();
console.log(vc2.$options.data);//jw 拿到的是被修改之后的值

如果data是函数：

function VueComponent(){
}
VueComponent.prototype.$options = {
  data() => ({name: 'zf'})
}
let vc1 = new VueComponent();
vc1.$options.data();
let vc2 = new VueComponent();
console.log(vc2.$options.data());

为什么main.js里的new Vue({对象})里边是一个对象，因为他是根节点，只有一个。