uniapp的生命周期和vue生命周期顺序

在 UniApp 和 Vue 中，生命周期的顺序存在一些差异。Vue 是基于 Web 开发的框架，而 UniApp 是基于 Vue 并扩展了跨平台能力（如小程序、H5 等）的框架，因此两者在生命周期的设计上有所不同。 ### Vue 生命周期顺序 Vue 的标准生命周期包括以下几个主要阶段： 1. **beforeCreate**：初始化数据和事件之前执行。 2. **created**：实例已经创建完成，数据观测 (data observer) 和事件配置已完成。 3. **beforeMount**：模板编译/挂载之前执行。 4. **mounted**：DOM 已经渲染完成，可以访问 DOM 元素。 5. **beforeUpdate**：数据更新时触发，但 DOM 还未更新。 6. **updated**：数据更新后触发，DOM 已经更新。 7. **beforeDestroy**：销毁前触发，可以进行清理操作。 8. **destroyed**：销毁完成后触发，所有绑定解除[^1]。 首次加载页面时会依次触发 `beforeCreate` → `created` → `beforeMount` → `mounted` [^2]。 --- ### UniApp 生命周期顺序 UniApp 的生命周期分为 **页面生命周期** 和 **组件生命周期** 两种类型，其中组件生命周期与 Vue 类似，但页面生命周期是 UniApp 特有的。 #### 页面生命周期 - **onLoad**：页面加载，接收参数。 - **onShow**：页面显示。 - **onReady**：页面初次渲染完成。 - **onHide**：页面隐藏。 - **onUnload**：页面卸载。 - **onPageScroll**：页面滚动时触发。 - **onPullDownRefresh**：下拉刷新。 - **onReachBottom**：触底事件[^4]。 #### 组件生命周期 组件生命周期与 Vue 类似，但部分钩子函数在某些平台（如小程序）中不支持： - **beforeCreate** - **created** - **beforeMount** - **mounted** - **beforeUpdate**（H5 支持，小程序不支持） - **updated**（H5 支持，小程序不支持） - **beforeUnmount**（Vue 3 使用 `beforeUnmount` 替代 `beforeDestroy`） - **unmounted**（Vue 3 使用 `unmounted` 替代 `destroyed`）[^3] 需要注意的是，在 UniApp 的 Vue 3 组合式 API 中，可以使用 `setup()` 函数替代 `beforeCreate` 和 `created` 阶段，因为 `setup()` 在创建阶段之前运行。 --- ### 对比总结 | 阶段 | Vue 生命周期 | UniApp 页面生命周期 | UniApp 组件生命周期 | |----------------|-------------------------|--------------------------|---------------------| | 初始化 | beforeCreate, created | onLoad | beforeCreate, created | | 挂载 | beforeMount, mounted | onShow, onReady | beforeMount, mounted | | 更新 | beforeUpdate, updated | 不适用 | beforeUpdate, updated（H5 支持） | | 销毁 | beforeDestroy, destroyed| onHide, onUnload | beforeUnmount, unmounted | 此外，在 UniApp 中，由于平台限制，部分 Vue 生命周期钩子在小程序环境中不可用，例如 `onBeforeUpdate` 和 `onUpdated` [^4]。 --- ### 示例代码：Vue 生命周期输出顺序 ```javascript export default { beforeCreate() { console.log('beforeCreate'); }, created() { console.log('created'); }, beforeMount() { console.log('beforeMount'); }, mounted() { console.log('mounted'); }, beforeUpdate() { console.log('beforeUpdate'); }, updated() { console.log('updated'); }, beforeUnmount() { console.log('beforeUnmount'); }, unmounted() { console.log('unmounted'); } }; ``` ---