Vue中data为什么是一个函数，而不是对象

我们在定义vue中data数据时，都是以函数返回的形式，为什么不能是对象形式呢？

首先，组件是可复用的vue实例，一个组件被创建好之后，可能会被复用在各个地方

那么，我们应该保证这个组件不管被复用几次，组件内部的data数据应该是相互隔离，互不影响的

所以，基于这一点，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方data数据被修改时，其他复用地方的data数据不受影响

举个例子，现在定义了一个组件，它可以实现点击按钮，自动加1的操作

<template>
  <div class="addBtn">
    <h1>按钮被点击了{
    
    {count}}次</h1>
    <button @click="count++">add</button>
  </div>
</template>

<script>
export default {
    name: "AddButton",
    data(){
        return {
            count: 0,
        }
    },
}
</script>

我现在将这个组件复用3次，那我点击任意一个按钮，应该只有对应的count会进行加1，其他的不变。

以上情况，就是正确的使用，能做到这样子就是因为 data是函数返回的形式

为什么呢？ 因为 如果data是一个函数的话，那么每复用一次组件，就会返回一份新的data（其实类似于给每个组件实例创建一个私有数据空间，让每个组件实例维护各自的数据，我理解的是 每个组件实例都会有自己的作用域）

那如果将data写成对象的形式呢？

Object是引用数据类型，里面保存的是内存地址，如果单纯的写成对象形式，就会使得所有组件实例共享一份data，这样就造成了一个变了其他也全变了。 （也就是上面例子中，点击一个按钮，所有的count都会加1。这样做，会导致数据污染）

总结

• 组件实例对象的data写成函数返回的形式，而不是对象的形式，是为了防止多个组件实例之间共享同一个data数据，而造成数据污染的情况。

• 采用函数返回的形式，每复用一次组件，会返回一份新的data。

• 而Object是引用数据类型，保存的是内存地址，如果采用对象的形式，会共享数据，造成一个数据变了其他数据也跟着全变了的情况