你知道vue data为什么是一个函数

你知道vue data为什么是一个函数？

在 Vue.js 中，组件的 data 选项必须是一个返回对象的函数。具体来说，data 属性必须是一个返回一个对象的函数，因为每个组件必须维护一个它私有的状态。如果 data 是一个普通的对象，那么它将被所有共享。

为什么要用函数包裹 data？

让我们来看一个示例：

<div id="app">
  <button @click="increment">{{ count }}</button>
</div>

new Vue({
  el: "#app",
  data: {
    count: 0
  },
  methods: {
    increment() {
      this.count++
    }
  }
})

在代码中，我们会发现通过给 data 设置初始值来定义 count。在这种情况下，由于对象是引用类型，因此将数据对象直接传递给 data 选项将导致无法实现组件之间的独立重用。所有实例都共享同一个对象。

如果我们使用返回一个对象的函数，就可以顺利地完成单独使用每个实例的目的：

new Vue({
  el: "#app",
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
})

每个组件实例都可以拥有一个单独的 count 属性。这样就可以避免组件之间数据混淆。

同时使用对象形式定义 data 选项是合法的，但是与函数形式相反，所有组件实例都将共享同一个对象。

const data = { count: 0 }

new Vue({
  el: "#app1",
  data
})

new Vue({
  el: "#app2",
  data
})

在上面的示例中，app1 和 app2 组件将共享相同的 data 对象。

使用函数形式定义 data，保证了每个组件实例能够维护自己的私有数据，和其他组件实例隔离。