Vue2|为什么vue组件中的data是函数而不是对象？

初学vue的小伙伴可能会感到疑惑，为什么在vue实例中存取变量的data是一个对象，而组件中的data不是一个对象而是一个函数？

我们先来看这个例子

    function foo() {
      return {
        name: 'sherry',
        age: 18
      }
    }

    let obj1 = foo()
    let obj2 = foo()
    let obj3 = foo()
    obj1.name = 'strawberry'
    console.log(obj1);
    console.log(obj2);
    console.log(obj3);

这个时候控制台输出的

这个时候每一个obj互不影响互相独立，每个obj指向的内存地址都不相同 

然后我们改成对象试试看

    const obj = {
      name: 'sherry',
      age: 18
    }
    function foo() {
      return obj

    }

    let obj1 = foo()
    let obj2 = foo()
    let obj3 = foo()
    obj1.name = 'strawberry'
    console.log(obj1);
    console.log(obj2);
    console.log(obj3);

控制台输出结果

 

根据输出结果不难看出，此时的几个obj对象指向的是同一个内存地址，改一个的属性其他的也会跟着改变

return obj 和return {}的区别就在于，每次给变量赋值的时候，前一个没有像后一个那样每次返回的时候创建一个新的对象，而是指向的obj这个对象的内存地址，obj1，obj2，obj3指向的都是obj的内存地址

回到最开始的问题，为什么vue组件中的data是函数而不是对象？

如果vue组件中的data是对象，我们在几个地方使用一个组件，那么因为此时的几个组件中的数据引用的都是同一个内存地址，更改一个组件的时候其他组件也会受影响，数据污染产生

所以vue2中组件中的data是函数而不是对象