[Vue]【面试题】VUE组件中的data（）为什么是一个函数？

前言：之前在听杨姐说这可能是一道面试，但只是告诉了我们用来改变this指向，所以我特地去深入了解了一下原理，良久，终于悟了个明白，把我自己的想法分享给大家，我也是个纯新人发帖，如果错误的地方，还请指正。

    我们知道组件与Vue实例之间不能直接数据访问，同一个组件用在不同的地方它们之间的数据会进行共享吗？当然不会，这是因为我们在存储data数据时用了data(){return {}}。为了方便理解，我给大家上段我测试的2段代码。
cpn1,cpn2,cpn3代表同一个组件放在三个不同的位置。

let data = {
  a: 1,
  b: 2,
  c: 3,
};
let cpn1 = data;
let cpn2 = data;
let cpn3 = data;
cpn1.a = 5;
console.log(cpn1.a);    //结果5
console.log(cpn2.a);    //结果5
console.log(cpn3.a);    //结果5

通过上述代码，我们看见cpn1,cpn2,cpn3都指向的同一个内存地址，它们之间属于浅拷贝，当我更改第一个cpn1.a的值时，其他组件cpn2,cpn3的值会跟着改动，这会给开发带来很大的麻烦。

//写一个data函数
function data() {
  return {
    a: 1,
    b: 2,
    c: 3,
  };
}
 let cpn1 = data();
let cpn2 = data();
let cpn3 = data();
cpn1.a = 5;
console.log(cpn1.a);    //结果5
console.log(cpn2.a);    //结果1
console.log(cpn3.a);    //结果1

通过上述的的代码，我们可以看到cnp1,cnp2,cnp3虽然都是同一个data，但他们的对象对象内存地址各不相同，this指向都指向自己的data互不影响。这也是我们在开发中，需要看到的组件数据独立的结果。总结：用函数return让每个组件都有自己的一个独立的this指向，让组件之间的数据互不影响。

666