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

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 作为参数。此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键。详情	√	√	√

3、Vue2 页面及组件生命周期流程图（UniApp）

4、Vue3 页面及组件生命周期流程图（UniApp）

5、总结

以前我们在学习js时，没有什么生命周期一说，从Vue一出，有了生命周期一说，这类似安卓App生命周期，有了生命周期，才知道App运行流程是怎么样的，才知道在对应的周期里运行对应的东西，UniApp的生命周期分为应用生命周期，页面生命周期，对于App开发来说，生命周期很重要，一定得牢记。