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

在 Vue 中，data 属性必须声明为一个返回初始数据对象的函数，而不是直接声明为一个对象。这是为了避免组件复用时数据共享的问题，确保每个组件实例都有自己独立的数据副本。

---

1. 为什么 data 必须是函数？

• 根本原因：Vue 组件是可复用的，如果 data 是一个普通对象，那么所有组件实例将共享同一个数据对象，导致数据互相影响。
• 函数的作用：通过将 data 声明为函数，每次创建组件实例时都会调用该函数，返回一个新的数据对象，从而确保每个组件实例都有自己独立的数据。

---

2. 示例对比

错误写法：data 为对象

export default {
  data: {
    count: 0
  }
};

• 问题：所有组件实例共享同一个 data 对象，修改一个实例的 count 会影响其他实例。

正确写法：data 为函数

export default {
  data() {
    return {
      count: 0
    };
  }
};

• 优点：每次创建组件实例时，都会调用 data 函数，返回一个新的数据对象，确保数据独立。

---

3. 底层原理

• Vue 在创建组件实例时，会调用 data 函数，将其返回值作为组件实例的响应式数据。
• 如果 data 是对象，所有组件实例将共享同一个引用，导致数据污染。
• 如果 data 是函数，每次调用都会返回一个新的对象，确保数据隔离。

---

4. 实际场景

场景 1：复用组件

<template>
  <div>
    <Counter />
    <Counter />
  </div>
</template>

<script>
import Counter from './Counter.vue';

export default {
  components: { Counter }
};
</script>

• 如果 Counter 组件的 data 是对象，两个 Counter 实例会共享同一个 count，点击一个按钮会影响另一个。
• 如果 data 是函数，每个 Counter 实例都有自己的 count，互不影响。

场景 2：动态创建组件

const Component = {
  data() {
    return {
      message: 'Hello'
    };
  }
};

const instance1 = new Vue(Component);
const instance2 = new Vue(Component);

instance1.message = 'Hi';
console.log(instance2.message); // 输出 'Hello'，数据独立

---

5. 总结

特性	data 为对象	data 为函数
数据共享	所有组件实例共享同一个数据对象	每个组件实例有独立的数据对象
适用场景	不适用于组件复用	适用于组件复用
底层原理	对象是引用类型，数据会互相影响	函数每次调用返回新对象，数据隔离
Vue 要求	不支持（根实例除外）	必须使用

---

6. 注意事项

• 根实例例外：在 Vue 根实例（new Vue()）中，data 可以是对象，因为根实例是唯一的，不存在复用问题。

  new Vue({
    data: {
      message: 'Hello'
    }
  });

• 组件必须使用函数：在组件中，data 必须是函数，否则会报错。

通过将 data 声明为函数，Vue 确保了组件数据的独立性和可复用性，这是 Vue 设计中的重要原则之一。