Vue组件中的生命周期钩子函数有哪些？
Vue组件中的生命周期钩子函数有哪些？
Vue 组件中的生命周期钩子函数可以分为三个主要阶段： 创建阶段、更新阶段和销毁阶段。
以下是 Vue 2.x 中常用的生命周期钩子函数：
一：创建阶段：
- beforeCreate：在实例初始化之后，数据观测 (data observer) 和事件配置 (event/watcher setup) 之前被调用。
- created：在实例创建完成后被调用。可以访问到实例的数据，并进行初始化操作。
二：更新阶段：
- beforeMount：在模板编译/挂载之前被调用。
- mounted：在实例挂载到 DOM 后被调用。可以访问到挂载的 DOM 元素。
三：销毁阶段：
- beforeDestroy：在实例销毁之前被调用。可以进行清理工作、解绑事件监听等操作。
- destroyed：在实例销毁后被调用。实例上的所有指令和事件监听器都会被移除。
除了上述常用的生命周期钩子函数，Vue 还提供了其他一些钩子函数，用于更精细地控制组件的生命周期。以下是一些其他的生命周期钩子函数：
- beforeUpdate：在数据更新之前，DOM 重新渲染之前被调用。可以在更新之前进行额外的操作。
- updated：在数据更新之后，DOM 重新渲染之后被调用。可以访问到更新后的 DOM 元素。
- activated：在组件被激活时调用，例如在 <keep-alive> 组件中。
- deactivated：在组件被停用时调用，例如在 <keep-alive> 组件中。
需要注意的是，Vue 3.x 引入了新的生命周期钩子函数，并对一些钩子函数进行了更改。具体的钩子函数命名和调用时机可能会有所不同。
Vue 3.x中的生命周期钩子函数有哪些变化？
在 Vue 3.x 中，生命周期钩子函数的命名和调用时机发生了一些变化。以下是 Vue 3.x 中的生命周期钩子函数及其对应的变化：
一：创建阶段：
- beforeCreate：与 Vue 2.x 中相同，保持不变。
- created：与 Vue 2.x 中相同，保持不变。
二：更新阶段：
- beforeMount：在 Vue 3.x 中已被移除，不再存在。
- mounted：在 Vue 3.x 中已被移除，不再存在。
三：组件更新：
- beforeUpdate：与 Vue 2.x 中相同，保持不变。
- updated：与 Vue 2.x 中相同，保持不变。
四：销毁阶段：
- beforeUnmount：在组件卸载之前被调用。替代了 Vue 2.x 中的 beforeDestroy。
- unmounted：在组件卸载之后被调用。替代了 Vue 2.x 中的 destroyed。
五：组件挂起和恢复：
- beforeMount：在组件挂载之前被调用。用于在组件挂起之前执行清理操作。
- mounted：在组件挂载之后被调用。用于在组件恢复之后执行初始化操作。
六：组件暂停和恢复：
- beforeUpdate：在组件暂停之前被调用。用于在组件暂停之前执行清理操作。
- updated：在组件恢复之后被调用。用于在组件恢复之后执行初始化操作。
注意，Vue 3.x 引入了新的 Composition API，其中使用了一些不同的生命周期函数。例如，setup 函数可以用来替代 beforeCreate 和 created 钩子函数，并提供更灵活的组件配置选项。
在使用 Vue 3.x 版本时，请参考官方文档以了解详细的生命周期钩子函数及其用法。
本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2023-09-01，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录