面试题：为什么 Vue 的 data 属性必须声明为返回一个初始数据的函数？

这是一个非常经典的 Vue 面试题，核心原因在于 JavaScript 的对象引用机制和 组件复用的需求。

问题核心：组件是可复用的

在 Vue 中，组件（Component）是一个可复用的实例。我们可以在一个应用中多次使用同一个组件（例如，多个 <UserCard> 或 <TodoItem> 组件）。

如果 data 是一个对象会发生什么？

假设 data 允许直接定义为一个对象：

// ❌ 错误的假设 - 如果 Vue 允许这样
const MyComponent = {
  data: {
    count: 0,
    message: 'Hello'
  },
  template: '<div>{{ count }} - {{ message }}</div>'
}

由于 JavaScript 中对象是引用类型，当这个组件被多次实例化时：

1. 所有组件实例的 data 属性都指向内存中的同一个对象。
2. 当任何一个组件实例修改了 data 中的数据（比如 count++），由于它们共享同一个数据对象，所有其他组件实例的数据也会被同步修改。

这会导致严重的数据污染和不可预测的行为，完全违背了组件“数据隔离”的基本原则。

正确的做法：data 必须是一个函数

// ✅ 正确的方式
const MyComponent = {
  data() {
    return {
      count: 0,
      message: 'Hello'
    }
  },
  template: '<div>{{ count }} - {{ message }}</div>'
}

• 每次组件实例化时，Vue 都会调用 data() 函数。
• 每次调用 data() 函数都会返回一个全新的对象。
• 这样，每个组件实例都有自己独立的数据对象副本，彼此之间互不影响。

类比理解

可以想象成一个“生产工厂”：

• data 是一个对象：工厂只生产一个“数据模具”，然后给所有产品（组件实例）用。一个产品修改了模具，所有产品都会受影响。
• data 是一个函数：工厂为每个产品单独生产一个全新的、独立的模具。每个产品都可以自由修改自己的模具，不会影响其他产品。

总结

Vue 要求组件的 data 必须是一个函数，其根本原因是为了保证每个组件实例都能拥有自己独立的数据副本，从而实现组件之间的数据隔离。如果 data 是一个对象，由于对象的引用特性，所有实例将共享同一份数据，导致数据混乱和不可维护的代码。

注意：在 Vue 的根实例（new Vue({...})）中，data 可以是一个对象，因为根实例通常只有一个，不存在复用的问题。但在任何可复用的组件中，data 必须是函数。