Vue 组件中的data为什么是函数

参考：https://blog.csdn.net/qq_42072086/article/details/108060494

1. 总结

（1）vue 中组件是用来复用的，为了防止 data 复用，将其定义为函数。

（2）vue 组件中的 data 数据都应该是相互隔离，互不影响的，组件每复用一次，data 数据就应该被复制一次，之后，当某一处复用的地方组件内 data 数据被改变时，其他复用地方组件的 data 数据不受影响，就需要通过 data 函数返回一个对象作为组件的状态。

（3）当我们将组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data，拥有自己的作用域，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。

（4）当我们组件的 data 单纯的写成对象形式，这些实例用的是同一个构造函数，由于 JavaScript 的特性所导致，所有的组件实例共用了一个 data，就会造成一个变了全都会变的结果。

2. 代码分析

vue 每次会通过组件创建出一个构造函数，每个实例都是通过这个构造函数 new 出来的

假如 data 是一个对象，将这个对象放到这个放到原型上去

function VueComponent(){}
VueComponent.prototype.$options = {
    data:{name:'three'} 
}
let vc1 = new VueComponent();
vc1.$options.data.name = 'six';     // 将vc1实例上的data修改为six
let vc2 = new VueComponent();         // 在new一个新的实例vc2
console.log(vc2.$options.data.name); // six
// 输出vc2的data的值是six，这时候发现vc2中的data也被修改了，他们data相互影响

将 data 改为一个函数

// 这样就可以保证每个组件调用data返回一个全新的对象，和外部没有关系
function VueComponent(){}
VueComponent.prototype.$options = {
    data: () => ({name:'three'}) 
}
let vc1 = new VueComponent();
let objData = vc1.$options.data()
objData.name = 'six'; // 调用data方***返回一个对象，用这个对象作为它的属性
console.log(objData)
let vc2 = new VueComponent();
console.log(vc2.$options.data());

3. 为什么new Vue里面的data是对象

因为这个类创建的实例不会被复用。它只会new一次，不用考虑复用。