vue 的 data 为何是函数不是对象

在 Vue 组件中，data 选项必须是一个函数，而不能直接是一个对象。这背后的核心原因是组件复用与数据隔离，保证每个组件实例都拥有一份独立的数据副本。

为什么不能使用对象？

想象一下，如果 data 是对象：


// ❌ 错误的写法
const MyComponent = {
  data: {
    count: 0
  }
}

当这个组件被复用多次时（比如在列表中使用 <MyComponent /> 多次），所有实例会共享同一个 data 对象引用。这样一旦某个实例修改了 count，其他实例的状态也会同步变化，产生混乱且难以调试的“交叉污染”。


// ✅ 正确的写法
const MyComponent = {
  data() {
    return {
      count: 0
    }
  }
}

每次创建组件实例时，Vue 都会调用 data 函数，它返回一个全新的对象。各个实例之间互不影响，每个 count 都是独立的。

JavaScript 引用类型机制 对象是引用类型，直接赋值会让多个变量指向同一块内存。函数返回新对象则避开了引用共享。
Vue 组件系统设计 Vue 将组件视为可复用的“模具”，每一个实例都应该拥有自己的状态，否则组件复用就失去了意义。函数保证了每次“铸造”出来的组件都带着纯新的数据副本。

对于根 Vue 实例（new Vue({...})），因为通常只会创建一次，所以 data 可以是对象。但在组件中，无论何时都应该使用函数形式，这是一条绝对遵循的规则。
在 Vue 3 的组合式 API 中，我们通常在 setup 里使用 ref / reactive 创建状态，每次调用 setup 同样会返回新的响应式引用，天然实现了隔离，原理一致。

一句话总结：data 必须为函数，是为了让每个组件实例都能拥有一份独立的数据拷贝，避免组件复用时状态互相干扰。如果还有疑问，欢迎继续讨论。