为什么vue组件中data必须用函数表达？

为什么vue组件中data必须用函数表达？

看到这个问题可能很多人都并可以注意过这个问题，问什么在脚手架中的.vue文件中data不能用对象来表达，而是必须使用函数的形式来表达呢？大家可能也不知道为什么这么设计？
实际上这是很有学问的，当初框架设计的时候，都是想了很多可能会出现的问题的。

首先，先看看官方怎么解释的：

抓住重点：每个实例可以维护一份被返回对象的独立的拷贝。
但还是有点模糊的概念，那就上个实例吧。

function abc(){
    return {
        name:'赵云',
        age:18
    }
}
let obj1=abc();
let obj2=abc();
let obj3=abc();
obj1.name='安琪拉';
console.log(obj2);
console.log(obj3);

打印出来的obj2、obj3的name还是赵云，不会因为obj1的改变而改变。
对三个不同的变量obj1，obj2，obj3进行赋值，并且都是调用同一个方法abc()，也就是说创建了三个不一样的实例，所以返回的是此方法返回的值，就被赋值给了不同的地址。 因此这三个变量的内存地址是不同的，此时改变其中一个变量的值，其他两个变量的值是不会跟随发生改变的。

假设vue组件中的data直接是一个对象，那么它的例子应该是这样的：

const abc={
        name:'赵云',
        age:18
    }
let obj1=abc;
let obj2=abc;
let obj3=abc;
obj1.name='安琪拉';
console.log(obj2);
console.log(obj3);

打印出来的obj2、obj3的name是安琪拉。因为obj1、obj2、obj3指向的是同一个地址，而obj1改变了name。

总结

综上可知，如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

所以说vue组件的data必须是函数。这都是因为js的特性带来的，跟vue本身设计无关。

js本身的面向对象编程也是基于原型链和构造函数，应该会注意原型链上添加一般都是一个函数方法而不会去添加一个对象了。