Vue 中 mounted 钩子函数的作用是什么？

推荐答案

mounted 是 Vue 实例生命周期钩子函数之一，它在 Vue 实例挂载到 DOM 后立即调用。此时，DOM 已经渲染完成，因此可以在这个钩子函数中进行 DOM 操作、数据初始化、或者发送异步请求等操作。

本题详细解读

1. mounted 钩子函数的触发时机

mounted 钩子函数在 Vue 实例挂载到 DOM 后触发。具体来说，它是在以下步骤完成后执行的：

• Vue 实例的模板编译完成。
• 虚拟 DOM 已经生成并挂载到真实的 DOM 上。
• 组件的初始渲染完成。

2. mounted 钩子函数的常见用途

• DOM 操作：由于 mounted 钩子函数执行时，DOM 已经渲染完成，因此可以在这个阶段进行 DOM 操作，比如获取 DOM 元素、绑定事件等。
• 数据初始化：可以在 mounted 钩子函数中进行一些数据的初始化操作，比如从服务器获取数据并更新组件的状态。
• 发送异步请求：可以在 mounted 钩子函数中发送异步请求，获取数据后更新组件的状态或视图。

3. mounted 钩子函数的注意事项

• SSR（服务器端渲染）：在服务器端渲染（SSR）场景下，mounted 钩子函数不会在服务器端执行，因为它依赖于浏览器的 DOM 环境。
• 子组件的 mounted：父组件的 mounted 钩子函数不会等待子组件的 mounted 钩子函数执行完毕。如果需要确保所有子组件都挂载完成，可以使用 this.$nextTick 或 Vue.nextTick。

4. 示例代码

// www.javascriptcn.com code example
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  mounted() {
    // DOM 操作
    const element = document.getElementById('app');
    console.log(element);

    // 数据初始化
    this.message = 'Updated message after mounted';

    // 发送异步请求
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 模拟异步请求
      setTimeout(() => {
        this.message = 'Data fetched!';
      }, 1000);
    }
  }
};

在这个示例中，mounted 钩子函数中进行了 DOM 操作、数据初始化和异步请求的发送。