Vue组件为什么data必须是一个函数

在Vue组件中，如果我们需要在数据中定义变量，那么我们通常会将这些变量存储在组件实例的data属性中，例如：

Vue.component('my-component', {
  data: {
    message: 'hello, world!'
  }
})

但是，在Vue组件中我们必须将data定义为一个函数，而不是一个简单的对象。这种要求是为什么呢？

1. 避免数据共享

如果我们在组件中直接使用对象形式的数据，那么所有该组件的实例将共享相同的数据。这意味着，如果有多个实例使用此数据，更改该数据将影响所有实例，从而导致不可预期的结果。

例如，我们使用以下代码定义一个Data对象：

const Data = {
  count: 0
}

Vue.component('my-component1', {
  data: Data
})

Vue.component('my-component2', {
  data: Data
})

由于Data对象是对象而不是函数，在my-component1和my-component2中都使用了相同的数据。这意味着在其中任何一个组件中更改计数器都会影响另一个组件：

const app1 = new Vue({
  el: '#app1',
})

const app2 = new Vue({
  el: '#app2',
})

// 我们分别将count值加1
app1.Data.count++
app2.Data.count++

这将导致计数器加2，而不是会期望的计数器加1。

而使用函数的形式定义data，每个实例将获得由该函数返回的新对象。这确保每个实例都使用其自己的数据：

Vue.component('my-component', {
  data: function () {
    return {
      count: 0
    }
  }
})

因此，在my-component1和my-component2中定义了两个不同的实例，它们有自己的数据，即使两个实例使用相同的组件：

const app1 = new Vue({
  el: '#app1',
  components: {
    'my-component1': myComponent,
  }
})

const app2 = new Vue({
  el: '#app2',
  components: {
    'my-component2': myComponent,
  }
})

// 我们分别将count值加1
app1.myComponent1.count++
app2.myComponent2.count++

这将导致计数器分别加1，分别计数。

1. 其他数据对象必须是函数的形式

在Vue组件中，数据不仅存在于data属性中，还存在于computed属性和props属性。这些属性的值也必须为函数，而不是对象。标准Vue实例的数据对象可以是一个普通的JavaScript对象。但是，在组件中，data必须声明为返回初始数据对象的函数，因为组件可能对同一组件多次使用，每个实例需要拥有自己的数据副本。(文末有补充，此处只展示示例)

例如：

Vue.component('my-component', {
  data() {
    return {
      message: 'hello',
      shown: false
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  },
  props: {
    name: String
  },
  template: `
    <div v-if="shown">
      <p>{{ reversedMessage }}, {{ name }}</p>
    </div>
    <button @click="toggle()">Toggle</button>
  `,
  methods: {
    toggle() {
      this.shown = !this.shown
    }
  }
})

综上所述，虽然data作为一个对象似乎可以使用，但是在组件化的情境下，使用函数的形式更为安全、合理。

补充说明：在Vue.js 3.0中，绝大多数情况下data不再需要是函数，主要是基于Vue.js 3.0对组件实例唯一化的设计。因此，在Vue.js 3.0中，组件之间不再共享数据对象，而是创建了一个新的Vue根实例，为每个组件实例分配唯一的组件实例对象。但是，我们还是建议使用函数的形式去声明data。