ARTICLE · 1303010

Vue生命周期钩子在UniApp中的应用

发布时间：2026-11-03 18:34:49 最近访问：2026-11-03 18:34:49

1、Vue 3 生命周期钩子介绍

onMounted()//注册一个回调函数，在组件挂载完成后执行。
onUpdated()//注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。
onUnmounted()//注册一个回调函数，在组件实例被卸载之后调用。
onBeforeMount()//注册一个钩子，在组件被挂载之前被调用。
onBeforeUpdate()//注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
onBeforeUnmount()//注册一个钩子，在组件实例被卸载之前调用。
onErrorCaptured()//注册一个钩子，在捕获了后代组件传递的错误时调用。
onRenderTracked()//注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用，仅在开发模式下可用，且在服务器端渲染期间不会被调用。
onRenderTriggered()//注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用，仅在开发模式下可用，且在服务器端渲染期间不会被调用。
onActivated()//注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用，在服务器端渲染期间不会被调用。
onDeactivated()//注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用，在服务器端渲染期间不会被调用。
onServerPrefetch()//注册一个异步函数，在组件实例在服务器上被渲染之前调用。

2、Vue生命周期钩子在UniApp 支持情况

生命周期钩子	描述	H5	App端	微信小程序
beforeCreate	在实例初始化之后，数据观测`(data observer)`和 `event/watcher` 事件配置之前被调用。详情	√	√	√
created	在实例创建完成后被立即调用。详情	√	√	√
beforeMount	在挂载开始之前被调用：相关的 `render` 函数首次被调用。详情	√	√	√
mounted	实例被挂载后调用，这时 `Vue.createApp({}).mount()` 被新创建的 `vm.$el` 替换了。详情	√	√	√
beforeUpdate	数据更新时调用，发生在虚拟 `DOM` 打补丁之前。详情	√	√	√
updated	由于数据更改导致的虚拟 `DOM` 重新渲染和打补丁，在这之后会调用该钩子。详情	√	√	√
activated	被 `keep-alive` 缓存的组件激活时调用。详情	√	√	x
deactivated	被 `keep-alive` 缓存的组件停用时调用。详情	√	√	x
beforeUnmount	在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。详情	√	√	√
unmounted	卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。详情	√	√	√
errorCaptured	当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。详情	√	√	√
renderTracked	跟踪虚拟 `DOM` 重新渲染时调用。钩子接收 `debugger event` 作为参数。此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。详情	√	√	√
renderTriggered	当虚拟 `DOM` 重新渲染为 `triggered.Similarly` 为`renderTracked`，接收 `debugger event` 作为参数。此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键。详情	√	√	√