Vue 组件有一系列的生命周期钩子函数,每个钩子函数都有特定的用途。以下是 Vue 组件各个生命周期钩子函数及其用途:
beforeCreate
在实例初始化之后,数据观测(data observer)和事件配置之前被调用。
created
在实例创建完成后被立即调用。在这一步,实例已完成以下配置:数据观测(data observer)、属性和方法的运算、watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
beforeMount
在挂载开始之前被调用,相关的 render 函数首次被调用。
mounted
实例被挂载后调用,这时 $el 已经被创建并插入到 DOM 中。如果根实例挂载到一个文档内的元素上,当 mounted 被调用时 vm.$el 也在文档内。
beforeUpdate
数据更新时调用,发生在虚拟 DOM 重新渲染和修补之前。可以在这个钩子中进一步地修改状态,不会触发附加的重渲染过程。
updated
由于数据更改导致的虚拟 DOM 重新渲染和修补,在这之后会调用此钩子。
beforeUnmount
实例销毁之前调用。在这个阶段,实例仍然完全可用。
unmounted
实例销毁后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。
errorCaptured (2.5.0+ 新增)
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例和一个包含错误来源信息的字符串。
这些生命周期钩子函数可以帮助开发者在组件的不同阶段执行特定的逻辑,例如:
created 钩子可用于在实例创建完成后执行初始化操作。
mounted 钩子可用于在组件挂载到 DOM 后执行 DOM 相关的操作。
beforeUpdate 和 updated 钩子可用于在组件更新时执行相关逻辑。
beforeUnmount 和 unmounted 钩子可用于在组件销毁前后执行清理操作。
合理使用这些生命周期钩子函数,可以帮助开发者更好地管理组件的状态和行为