[JavaScript知识库]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);

运行结果如下：

Objectage: 18name: "kobe"[[Prototype]]: Object
07-组件中的data为什么是函数.html:83 Objectage: 18name: "kobe"[[Prototype]]: Object
07-组件中的data为什么是函数.html:84 Objectage: 18name: "kobe"[[Prototype]]: Object

可以看出来，运行结果都是Kobe，会因为一个对象的更改，影响到其他的对象。三个对象是同一个对象。

data() {
      return {
        counter: 0
      }
    }

组件中的data数据如果定义为：data{}，那么组件一，组件二，组件三都使用的是一个data，因为只有这一个data数据。当其中一个更改的时候，其他两个也会相应的跟着更改。

而当组件中的data数据定义为：data(){},定义为方法的时候，使用该数据的组件不会互相影响，一个更改不会影响到其他的组件。

如果想要引起连锁反应，即想让组件中的数据互相影响，一个改变全部改变，可以使用如下代码：

 const obj = {
     counter: 0
   }
  Vue.component('cpn', {
    template: '#cpn',
    data() {
      return obj
     },
  })

真实开发中是不会想要引起连锁反应的，每个组件中都有自己相应的保存对象的实例，不能让组件之间产生相互的影响。所以每当组件中的data写成对象的时候就会报错。以上就是为什么组件中的data数据为什么要写成函数的个人总结。