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

在 Vue.js 框架中，组件定义时 data 属性应该是一个函数而不是一个对象，主要是为了防止多个组件实例之间数据共享导致的状态污染问题，确保每个组件实例的独立性。

当组件被复用时 (如在父组件中多次渲染同一个子组件)，如果 data 是一个对象，所有实例会共享同一块内存地址，导致任一实例修改数据会影响其他实例：

// ❌ 错误：data作为对象（组件定义）
MyComponent {
  data: { count: 0 },
}
const instanceA = new MyComponent();
const instanceB = new MyComponent();
instanceA.data.count = 5;  // instanceB.data.count 同时被修改

而定义为函数时，Vue 会在实例化组件时调用该函数，每次都返回一个全新的 data 对象实例，使各组件实例拥有独立的状态空间：

// ✅ 正确：data作为函数（组件定义）
MyComponent {
  data() {
    return {
      count: 0,  // 返回新对象
    };
  },
}
const instanceA = new MyComponent();
const instanceB = new MyComponent();
instanceA.count = 5;  // instanceB.count 保持为0 (无影响)

原理分析：
Vue 内部通过调用函数返回的对象递归实现响应式劫持，这要求 data 具有独立性。同时，函数在实例初始化时会被执行一次，确保数据初始值一致性。

对于 Vue 根实例：

• data 可以是对象 (因为不存在复用风险)。
• 但对于组件，定义为函数是现代前端框架的必须实践。

影响范围：

• 不设成函数时：无法实现按需状态更新, 导致状态污染和运行时错误。
• 设成函数后：支持异步加载、响应式渲染和并行开发。