Vue 面试题 目录

Vue 中 created 钩子函数的作用是什么?

推荐答案

在 Vue 中,created 钩子函数是 Vue 实例生命周期中的一个重要阶段。它会在 Vue 实例创建完成后立即调用。在这个阶段,Vue 实例已经完成了数据观测(data observation)、计算属性(computed properties)、方法(methods)、事件回调(event callbacks)等的初始化,但尚未挂载到 DOM 上。

created 钩子函数通常用于执行一些初始化操作,比如发起网络请求、初始化数据、设置定时器等。由于此时 DOM 还未生成,因此不能在这个阶段进行 DOM 操作。

本题详细解读

1. created 钩子函数的执行时机

created 钩子函数在 Vue 实例创建完成后立即执行。具体来说,它是在以下步骤之后执行的:

  • 数据观测(data observation)已经完成。
  • 计算属性(computed properties)和方法(methods)已经初始化。
  • 事件回调(event callbacks)已经设置。

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

  • 数据初始化:可以在 created 钩子函数中对数据进行初始化操作,比如从服务器获取数据并赋值给 Vue 实例的 data 属性。
  • 定时器设置:可以在这个阶段设置定时器,比如轮询服务器数据。
  • 事件监听:可以在这个阶段添加事件监听器,比如监听窗口大小变化等。

3. created 钩子函数与 mounted 钩子函数的区别

  • created:在 Vue 实例创建完成后立即调用,此时 DOM 还未生成,因此不能进行 DOM 操作。
  • mounted:在 Vue 实例挂载到 DOM 后调用,此时可以进行 DOM 操作。

4. 示例代码

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

在这个示例中,created 钩子函数用于初始化 message 数据,并发起一个网络请求来更新 message

纠错
反馈