Vue3 响应式生命周期-JavaScript中文网-JavaScript教程资源分享门户

引言

在 Vue.js 中，组件的生命周期是指组件从创建到销毁的过程。每个阶段都有对应的钩子函数，可以在这些钩子函数中执行特定的操作，如初始化数据、更新视图或清理工作等。Vue3 在响应式系统和生命周期方面进行了改进，使得开发者可以更灵活地管理组件的生命周期。

生命周期钩子

beforeCreate

beforeCreate 是一个实例创建完成后触发的生命周期钩子。在这个阶段，Vue 已经完成了数据的观测（设置了 getter 和 setter），但是还没有开始编译模板。这意味着你无法访问到任何实例的数据或方法。

export default {
  beforeCreate() {
    console.log('beforeCreate');
  }
}

created

created 钩子在 beforeCreate 之后调用，此时实例已完成数据观测，属性和方法的运算，但尚未挂载到 DOM 上。这意味着你可以访问到实例的数据和方法，但不能操作 DOM。

export default {
  created() {
    console.log('created');
  }
}

beforeMount

beforeMount 钩子在挂载开始之前被调用，此时 Vue 实例已经完成了数据观测、属性和方法的运算、计算属性缓存等。但还没有挂载到 DOM 上，因此不能访问到 $el 属性。

export default {
  beforeMount() {
    console.log('beforeMount');
  }
}

mounted

mounted 钩子在挂载完成后调用，此时 Vue 实例已经挂载到了真实的 DOM 上，并且已经完成了所有必要的初始化。在这个阶段，你可以通过 this.$el 访问到 DOM 元素，并进行相关的 DOM 操作。

export default {
  mounted() {
    console.log('mounted');
    // 可以在这里操作 DOM
  }
}

beforeUpdate

beforeUpdate 钩子在数据更新时调用，发生在虚拟 DOM 打补丁之前。这个钩子可以用来监听和捕获组件的数据变化。

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

updated

updated 钩子在由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。注意，如果你的 DOM 操作依赖于更新后的 DOM 状态，最好使用 nextTick 来确保在 DOM 更新完成后执行。

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

activated & deactivated

对于 <keep-alive> 包裹的组件，Vue 提供了 activated 和 deactivated 钩子。activated 在组件激活时调用，deactivated 在组件停用时调用。

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

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

beforeUnmount & unmounted

beforeUnmount （Vue2 中为 beforeDestroy）和 unmounted （Vue2 中为 destroyed）是用于处理组件卸载前后的逻辑。beforeUnmount 在组件卸载前调用，而 unmounted 在组件完全卸载后调用。

export default {
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  }
}

总结与注意事项

在 beforeCreate 和 created 阶段，数据还未挂载到 DOM 上，因此不能进行 DOM 操作。
mounted 阶段是进行 DOM 操作的最佳时机。
对于数据更新引起的视图变化，使用 beforeUpdate 和 updated 钩子来处理。
使用 keep-alive 的组件需要关注 activated 和 deactivated 钩子。
在组件销毁前后使用 beforeUnmount 和 unmounted 钩子来进行资源清理。

以上就是 Vue3 中关于响应式生命周期的基本介绍和使用场景，希望对你有所帮助。