面试官：Vue 中 data 属性为什么是一个函数而不是对象？

在 Vue 中，data 属性在组件定义 时必须是一个函数，而不是一个纯对象，这种实现机制是为了解决组件实例间的数据隔离问题。

我们可以从以下几个层面来深入理解这个问题：

1. 核心原因：避免组件实例间的数据共享（数据污染）

Vue 的核心思想之一是组件化，即一个组件可以被多次复用。如果 data 是一个对象，那么所有组件实例将共享同一个 data 对象的引用，这会导致一个实例修改数据时，其他实例也会受到影响，造成严重的数据污染。

javascript 复制代码

// ❌ 错误示例：data 为对象
const MyComponent = {
  data: {
    count: 0
  },
  template: `<div>{{ count }}</div>`
}

// 如果创建多个实例
const vm1 = new Vue(MyComponent);
const vm2 = new Vue(MyComponent);

vm1.data.count = 100;
console.log(vm2.data.count); // 100！这显然不是我们期望的

而当 data 是一个函数时，每次创建组件实例，Vue 都会调用这个函数，返回一个全新的对象，从而保证每个实例都有自己独立的数据副本。

javascript 复制代码

// ✅ 正确示例：data 为函数
const MyComponent = {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
}

// 每个实例调用 data() 都会返回一个新的对象
const vm1 = new Vue(MyComponent);
const vm2 = new Vue(MyComponent);

vm1.count = 100;
console.log(vm2.count); // 0，互不影响

2. JavaScript 原型链与对象引用机制

Vue 组件本质上是一个构造函数或类，data 作为组件定义的一部分，如果直接赋值为对象，它会成为原型上的一个属性。由于 JavaScript 的原型链机制，所有实例共享原型上的属性，而对象是引用类型，因此会导致所有实例共用同一个 data 对象。

通过将 data 定义为函数，利用函数的执行上下文（execution context），每次调用都能生成一个新对象，巧妙地规避了原型链上的引用共享问题。

3. Vue 的实例化过程（源码层面）

在 Vue 的源码中（以 Vue 2.x 为例），在初始化组件实例时，会调用 initData 方法，其中会判断 data 是否为函数，如果是，则通过 call 调用该函数，并将其返回值作为当前实例的 _data。

javascript 复制代码

function initData(vm) {
  let data = vm.$options.data;
  data = vm._data = typeof data === 'function'
    ? data.call(vm)  // 确保 this 指向当前实例
    : data || {};
  // ... observe data
}

这个设计确保了 data 函数中的 this 可以指向当前组件实例。

Ps: 在实际开发中不推荐在 data 函数中使用 this 来访问 props 或其他选项，因为此时实例尚未完全初始化。

4. 对比：根实例 vs 组件实例

值得注意的是，在 Vue 的根实例 （通过 new Vue() 创建）中，data 可以是一个对象。这是因为根实例通常只存在一个，不存在复用和数据共享的问题。

javascript 复制代码

new Vue({
  el: '#app',
  data: {  // 这里可以是对象
    message: 'Hello Vue!'
  }
})

但一旦进入组件化开发，就必须使用函数形式，这是 Vue 强制规定的最佳实践。

5. 与现代 Vue 3 的呼应

在 Vue 3 中，虽然 Composition API（setup）成为主流，但选项式 API 依然支持。data 作为函数的设计依然保留，同时，setup 函数本身也天然避免了数据共享问题，因为每次组件实例化都会执行一次 setup。

总结

将 data 设计为函数，是 Vue 框架在组件化架构下，为确保数据隔离性 、防止状态污染 、遵循单一职责原则而做的设计。