面试题：Vue 中 created 和 mounted 生命周期钩子有什么区别？

在 Vue 中，created 和 mounted 是两个常用的生命周期钩子，它们在组件的生命周期中扮演不同的角色。以下是它们的区别和具体使用场景：

1. `created` 钩子

触发时机

created 钩子在组件实例创建完成后立即调用。
此时，组件的 data、computed、methods 等已经初始化完成，但 DOM 还未生成。

主要特点

DOM 未挂载：无法访问或操作 DOM 元素。
数据已初始化：可以访问和修改 data、computed、methods 等。
适合场景：
- 初始化数据（如发起异步请求）。
- 设置定时器或监听器。
- 执行不依赖 DOM 的逻辑。

示例

export default {
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
  created() {
    console.log('created 钩子调用');
    console.log('message:', this.message); // 可以访问 data
    console.log('DOM 未挂载，无法访问 this.$el');
  },
};

2. `mounted` 钩子

触发时机

mounted 钩子在组件挂载到 DOM 后调用。
此时，组件的模板已经渲染为真实的 DOM，可以访问和操作 DOM 元素。

主要特点

DOM 已挂载：可以访问和操作 this.$el 或通过 ref 获取 DOM 元素。
适合场景：
- 操作 DOM 元素（如初始化第三方库、绑定事件）。
- 执行依赖 DOM 的逻辑（如获取元素尺寸、位置）。

示例

export default {
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
  mounted() {
    console.log('mounted 钩子调用');
    console.log('message:', this.message); // 可以访问 data
    console.log('DOM 已挂载，可以访问 this.$el:', this.$el);
  },
};

3. `created` 和 `mounted` 的区别

特性	`created`	`mounted`
触发时机	组件实例创建完成，DOM 未挂载	组件挂载到 DOM 后
DOM 访问	无法访问 DOM	可以访问 DOM
数据访问	可以访问 `data`、`computed` 等	可以访问 `data`、`computed` 等
适合场景	初始化数据、不依赖 DOM 的逻辑	操作 DOM、依赖 DOM 的逻辑
异步请求	适合发起异步请求	适合处理异步请求返回的数据

4. 使用场景示例

在 `created` 中发起异步请求

export default {
  data() {
    return {
      userData: null,
    };
  },
  created() {
    this.fetchUserData();
  },
  methods: {
    async fetchUserData() {
      const response = await fetch('/api/user');
      this.userData = await response.json();
    },
  },
};

在 `mounted` 中操作 DOM

export default {
  mounted() {
    const button = this.$el.querySelector('button');
    button.addEventListener('click', this.handleClick);
  },
  methods: {
    handleClick() {
      console.log('按钮被点击');
    },
  },
};