vue中为什么组件里面的data数据必须是一个函数？

在讲解之前先来做一个铺垫，补充一下知识

先看下面代码，是一个函数里面定义对象。

function abc() {
      return {
        name: 'why',
        age: 18
      }
    }

    let obj1 = abc()
    let obj2 = abc()
    let obj3 = abc()

    obj1.name = 'kobe'
    console.log(obj1);
    console.log(obj2);
    console.log(obj3);

上面代码的运行结果如下：

{name: "kobe", age: 18}
 {name: "why", age: 18}
 {name: "why", age: 18}

可以看出来，调用函数的对象每次调用的时候都是不同的地址。不会因为一个对象修改，影响其他的对象。三个对象是不同的对象。

const obj = {
      name: 'why',
      age: 18
    }
    
    function abc() {
      return obj
    }
    
    let obj1 = abc()
    let obj2 = abc()
    let obj3 = abc()

    obj1.name = 'kobe'
    console.log(obj1);
    console.log(obj2);
    console.log(obj3);</