在Vue、小程序（以微信小程序为例）和Uni-app中，生命周期的概念非常关键，它们帮助开发者理解组件或页面从创建到销毁的整个过程，并在适当的时候执行特定的代码。下面分别介绍这三个框架/平台的生命周期：
Vue 的生命周期
Vue 组件的生命周期主要指的是组件从创建到销毁的一系列过程。Vue 2.x 和 Vue 3.x 在生命周期上有所不同，但大体上可以分为以下几个阶段：
- beforeCreate：在实例初始化之后，数据观测（data observer）和event/watcher 事件配置之前被调用。
- created ：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测（data observer），属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，
$el属性目前不可见。 - beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。
- mounted：el 被新创建的 vm.el替换，并挂载到实例上去之后调用该钩子。如果根实例挂载了一个文档内元素，当mounted被调用时vm.el 也在文档内。
- beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
- updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用这个钩子。当这个钩子被调用时，组件 DOM 已经更新，所以现在可以执行依赖于 DOM 的操作。但是要避免更改状态，因为这可能会导致无限循环的更新。
- beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
- destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
Vue 3.x 中，beforeDestroy 和 destroyed 被重命名为 beforeUnmount 和 unmounted，以更好地反映它们的目的。
小程序的生命周期
小程序的生命周期主要包括页面生命周期和全局生命周期（如App的生命周期）。以微信小程序为例：
- 页面生命周期 ：
onLoad：页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。onShow：页面显示/切入前台时触发。onReady：页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。onHide：页面隐藏/切入后台时触发。onUnload：页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时。- 全局生命周期 （
App）： onLaunch：当小程序初始化完成时，会触发 onLaunch（全局只触发一次）。onShow：当小程序启动，或从后台进入前台显示，会触发 onShow。onHide：当小程序从前台进入后台，会触发 onHide。onError：当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息。
Uni-app 的生命周期
Uni-app 的生命周期同时包含了 Vue 和小程序的生命周期概念，因为它旨在编写一次代码，然后发布到多个平台（包括小程序、H5、App等）。Uni-app 的页面和组件生命周期与 Vue 非常相似，但请注意，Uni-app 还会根据目标平台（如微信小程序）调整或添加一些特定的生命周期钩子。
对于页面来说，Uni-app 支持 Vue 的生命周期钩子，如 onLoad、onShow、onReady、onHide、onUnload 等，并且在编译到小程序时，这些钩子会映射到对应小程序的生命周期方法上。
总的来说，虽然 Vue、小程序和 Uni-app 在生命周期的具体实现上有所不同，但它们都遵循了类似的模式，帮助开发者在组件或页面的不同阶段执行相应的代码。
原文链接: https://blog.csdn.net/hexadecimal_001/article/details/141684727