Vue 生命周期指的是 Vue 实例从创建到销毁的整个过程中,所经历的不同阶段,在每个阶段 Vue 都提供了一系列的钩子函数(Lifecycle Hooks),允许开发者在特定阶段执行自定义逻辑。

Vue 生命周期可以分为以下几个阶段:

  1. 创建阶段(Creation)

    • beforeCreate:实例刚在内存中创建,数据观测和事件配置之前被调用。
    • created:实例已经创建完成,实例上的数据观测和事件配置已完成,但挂载阶段还未开始。
  2. 挂载阶段(Mounting)

    • beforeMount:挂载开始之前被调用,此时模板编译已完成,但尚未将模板挂载到 DOM 中。
    • mounted:挂载完成,实例已经挂载到 DOM 中,可以进行 DOM 操作。
  3. 更新阶段(Updating)

    • beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
    • updated:数据更新完成,组件 DOM 已更新。
  4. 销毁阶段(Destroying)

    • beforeDestroy:实例销毁之前调用,此时实例仍然完全可用。
    • destroyed:实例销毁之后调用,所有的事件监听器和子实例已被移除。

此外,Vue 还提供了一些其他的生命周期钩子函数,比如 activateddeactivated(用于 <keep-alive> 组件)、errorCaptured(用于捕获子孙组件错误)等。

通过这些生命周期钩子函数,可以在不同的阶段执行自定义的操作或逻辑,比如在数据更新时执行某个函数、在组件销毁前进行清理等。这些钩子函数为开发者提供了丰富的控制和扩展 Vue 实例的能力。

Was this helpful?

0 / 0

发表回复 0

Your email address will not be published.