Vue 组件中的 data 为什么是函数?

        组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。

        而单纯的写成对象形式，就使得所有组件实例共用了一份 data，如果其中一个组件改变了data的值，那么其它所有使用同一个data对象的组件都会受到影响。而当我们将data定义为一个函数时，每个组件都会调用这个函数，返回一个新的对象，这样每个组件都拥有了自己独立的data对象，彼此之间不会产生影响。

        在Vue组件中，data为什么是函数是因为组件是可以复用的，如果每个组件都使用同一个data对象，那么当一个组件改变了data的值，其它组件的data也会被改变，这显然是不合理的。

        因此，为了保证每个组件都有自己独立的data对象，Vue规定了data必须是返回一个对象的函数。 具体来说，当我们在组件中定义data为一个对象时，这个对象会被所有组件实例共享，如果其中一个组件改变了data的值，那么其它所有使用同一个data对象的组件都会受到影响。而当我们将data定义为一个函数时，每个组件都会调用这个函数，返回一个新的对象，这样每个组件都拥有了自己独立的data对象，彼此之间不会产生影响。

        举个例子，假设我们有两个相同的组件：

<!-- MyComponent.vue -->
<template>
  <div>{{ count }}</div>
</template>
<script>
export default {
  data: {
    count: 0
  }
}
</script>

如果我们在父组件中使用两次这个组件：

<!-- Parent.vue -->
<template>
  <div>
    <my-component></my-component>
    <my-component></my-component>
  </div>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
  components: {
    MyComponent
  }
}
</script>

        那么这两个组件使用的是同一个data对象，也就是说它们共享同一个count属性。如果其中一个组件将count的值改为1，那么另一个组件的count也会变成1，这显然是不合理的。因此，我们应该将MyComponent的data定义为一个函数，返回一个新的对象：

<!-- MyComponent.vue -->
<template>
  <div>{{ count }}</div>
</template>
<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

        这样，每个组件都有自己独立的count属性，彼此之间不会产生影响。