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. 示例代码

-- -------------------- ---- -------
------ ------- -
  ------ -
    ------ -
      -------- ------- -----
    --
  --
  --------- -
    -- --- --
    ----- ------- - -------------------------------
    ---------------------

    -- -----
    ------------ - -------- ------- ----- ---------

    -- ------
    -----------------
  --
  -------- -
    ----------- -
      -- ------
      ------------- -- -
        ------------ - ----- ----------
      -- ------
    -
  -
--

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