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

先看一下官方文档是怎么说的
在这里插入图片描述

官方文档其实想表达的意思是，让每一个组件都有自己的数据
每次调用的时候都会return一个新的数据
让各个组件之间的数据不会相互影响

理解一下

上代码，

// 创建一个对象
  const obj = {
    
    
    name: '超人',
    age: 20
  }
// 通过这个函数分发
  function giveData() {
    
    
    return obj
  }
// 通过函数创建出来三个
  const obj1 = giveData()
  const obj2 = giveData()
  const obj3 = giveData()
// 打印出来看看
  console.log(obj1)
  console.log(obj2)
  console.log(obj3)

看一下输出到控制台的结果
在这里插入图片描述
完美！没一点毛病
我们来改一下obj的内容

此时在打印一下obj123看看他们

可以看到，3个超人都变成戴安娜了，这不是我们想要的结果把，3个爷们没意思，3个女的也不好玩啊

其实这不难理解，我们来画一下内存图

在这里插入图片描述
当我们把超人改成戴安娜之后，他们三个都是同一个内存地址，所以内容全部都被改了

我们来换一种写法

  function giveData() {
    
    
    return {
    
    
      name: '超人',
      age: 20
    }
  }

  const obj1 = giveData()
  const obj2 = giveData()
  const obj3 = giveData()

  console.log(obj1)
  console.log(obj2)
  console.log(obj3)

再看一下控制台的结果
在这里插入图片描述
看起来跟上次一样，我们来更改一下试试

再看看他们三个

在这里插入图片描述
可以看到只有其中一个对象的name属性被更改了，这下子他们就能愉快的玩耍了

再来看一下内存图

在这里插入图片描述
可以看出来，他们三个这下子不在同一个对象的分身了，他们是三个独立的个体，有着属于自己的内存地址，这时候我们再去更改第一个，第二个和第三个当然不会改变

以上就是为什么组件里的data必须是一个函数的原因

我们写一个实例看看

<body>
  <div id="app">
    <cpnson></cpnson>
    <cpnson></cpnson>
  </div>

  <template id="cpnson">
    <div>
      <h1>{
   
   {message}}</h1>
      <button @click='add'>点击变大</button>
    </div>
  </template>
</body>

  const cpnson = {
    
    
    template: "#cpnson",
    data() {
    
    
      return {
    
     message: 0 }
    },
    methods: {
    
    
      add() {
    
    
        this.message++
      }
    }
  }


  const app = new Vue({
    
    
    el: "#app",
    data: {
    
    },
    components: {
    
    
      cpnson,
    }
  })

看一下到页面上的效果
在这里插入图片描述
点击试试看

如果组件中的data不是函数的话，那么多个组件将会共享同一个数据，其中一个组件上对数据做出的改变，也会影响另一个组件上的数据、
组件上的data是函数的情况下，组件每次调用data里面的数据，都是由data这个独有的函数返回过来的数据，所以不会造成这个组件更改data的数据，另一个在使用这个数据的组件也会更改这个数据