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

在 Vue 中，data 属性被设计为一个函数而不是一个对象，主要是为了解决 组件实例之间的数据隔离问题。以下是具体原因和解释：

1. 组件实例的数据隔离

问题背景

在 Vue 中，组件是可以复用的。如果 data 是一个对象，那么所有组件实例将共享同一个数据对象，导致一个组件实例修改数据时，其他实例的数据也会被修改。

示例

// 错误示例：data 是一个对象
const MyComponent = {
  data: {
    count: 0
  }
};

// 创建两个组件实例
const instance1 = new Vue(MyComponent);
const instance2 = new Vue(MyComponent);

// 修改 instance1 的数据
instance1.count++; // instance2.count 也会被修改
console.log(instance1.count); // 1
console.log(instance2.count); // 1（预期应为 0）

解决方案

将 data 定义为一个函数，每次创建组件实例时，Vue 都会调用该函数返回一个新的数据对象，确保每个实例都有独立的数据。

// 正确示例：data 是一个函数
const MyComponent = {
  data() {
    return {
      count: 0
    };
  }
};

// 创建两个组件实例
const instance1 = new Vue(MyComponent);
const instance2 = new Vue(MyComponent);

// 修改 instance1 的数据
instance1.count++; // instance2.count 不受影响
console.log(instance1.count); // 1
console.log(instance2.count); // 0

2. 根实例的例外

在 Vue 的根实例（new Vue()）中，data 可以是一个对象，因为根实例是唯一的，不存在多个实例共享数据的问题。

// 根实例中 data 可以是对象
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

3. 函数返回新对象的必要性

将 data 定义为一个函数，每次返回一个新的对象，可以确保：

数据独立性：每个组件实例都有独立的数据副本，避免数据污染。
可复用性：组件可以在多个地方复用，而不会相互影响。
响应式系统：Vue 的响应式系统依赖于每个实例的独立数据对象。

4. 源码中的实现

在 Vue 的源码中，data 函数会在组件初始化时被调用，返回的数据对象会被 Vue 的响应式系统处理。

function initData(vm) {
  let data = vm.$options.data;
  data = vm._data = typeof data === 'function' ? data.call(vm) : data || {};
  // 将 data 转换为响应式数据
  observe(data, true /* asRootData */);
}

5. 总结

特性	`data` 为对象	`data` 为函数
数据隔离	多个实例共享同一个数据对象，导致数据污染	每个实例有独立的数据对象，数据隔离
适用场景	仅适用于根实例	适用于所有组件实例
响应式系统支持	支持	支持
可复用性	不可复用	可复用