uniapp生命周期与钩子函数-uniapp快速入门与实战

当前位置:　首页>> 技术小册>> uniapp快速入门与实战

### 章节：uniapp生命周期与钩子函数

在开发uni-app应用时，深入理解其生命周期与钩子函数是提升开发效率、优化应用性能的关键。uni-app是一个使用Vue.js开发所有前端应用的框架，它支持编译到iOS、Android、H5、以及各种小程序等多个平台。因此，了解uni-app的生命周期不仅涉及Vue的生命周期，还包含其作为跨平台框架特有的生命周期过程。本章节将详细阐述uni-app的生命周期概念、各平台差异、以及如何在不同场景下有效利用钩子函数。

#### 一、uni-app生命周期概述

生命周期指的是一个对象从创建到销毁的整个过程，对于uni-app应用而言，其生命周期涵盖了应用启动、页面加载、数据请求、用户交互、页面关闭等多个阶段。uni-app的生命周期既包含了Vue实例的生命周期，也包含了页面（Page）的生命周期，以及特定平台（如小程序）的生命周期。

- **Vue实例生命周期**：与Vue.js保持一致，包括`beforeCreate`、`created`、`beforeMount`、`mounted`、`beforeUpdate`、`updated`、`beforeDestroy`、`destroyed`等钩子函数。
- **页面生命周期**：特指uni-app页面（Page）的生命周期，如`onLoad`、`onShow`、`onReady`、`onHide`、`onUnload`等，这些钩子函数更多地与页面的显示、隐藏、加载等状态相关。
- **平台特有生命周期**：不同平台（如微信小程序、H5、App等）可能有其特有的生命周期函数，用于处理平台特有的逻辑。

#### 二、Vue实例生命周期详解

在uni-app中，Vue实例的生命周期遵循Vue.js的标准，这里简要回顾几个关键的生命周期钩子：

- **beforeCreate**：实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。此时，数据还没有被挂载到实例上，因此无法访问到data、computed、watch等。
- **created**：实例已经创建完成之后被立即调用。在这一步，实例已完成数据观测、属性和方法的运算、watch/event 事件回调。然而，挂载阶段还没开始，`$el` 属性目前不可见。
- **beforeMount**：在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。
- **mounted**：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el 也在文档内。
- **beforeUpdate**：数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
- **updated**：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用这个钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
- **beforeDestroy**：实例销毁之前调用。在这一步，实例仍然完全可用。
- **destroyed**：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

#### 三、uni-app页面生命周期

uni-app页面生命周期与Vue实例生命周期有所不同，它更多地关注于页面的加载、显示、隐藏等状态变化。

- **onLoad(options)**：页面加载时触发。一个页面只会调用一次，可以在`options`中获取打开当前页面路径中的参数。
- **onShow()**：页面显示时触发，每次打开页面都会调用一次。
- **onReady()**：页面初次渲染完成时触发，只调用一次，代表页面已经准备妥当，可以和视图层进行交互。
- **onHide()**：页面隐藏时触发，如navigateTo或底部tab切换到其他页面，小程序切入后台等。
- **onUnload()**：页面卸载时触发，如redirectTo或navigateBack到其他页面时。

#### 四、平台特有生命周期与差异

不同平台（如微信小程序、H5、App等）在生命周期上可能存在差异，了解这些差异对于跨平台开发至关重要。

- **微信小程序**：除了上述通用页面生命周期外，还有`onPullDownRefresh`（下拉刷新）、`onReachBottom`（页面上拉触底事件的处理函数）等特有生命周期。
- **H5**：在H5环境下，uni-app会尽量模拟小程序的页面生命周期，但由于浏览器的限制，某些生命周期（如`onUnload`）的触发可能与小程序不同。
- **App（原生应用）**：在App中，页面生命周期与原生应用的生命周期更为接近，uni-app通过Vue组件的生命周期结合原生API来模拟，如使用`plus.runtime.on("show")`监听应用显示事件。

#### 五、钩子函数的最佳实践

- **数据请求**：在`onLoad`或`created`钩子中进行数据请求是常见的做法，但需注意，`onLoad`能获取到页面参数，适合需要页面参数来决定加载哪些数据的场景。
- **资源初始化**：在`onReady`中初始化DOM操作或第三方库，确保此时DOM已渲染完成。
- **页面状态管理**：利用`onShow`和`onHide`来管理页面状态，如暂停/恢复视频播放、隐藏/显示广告等。
- **性能优化**：在`onUnload`中清理定时器、事件监听器等，避免内存泄漏。
- **跨平台兼容性**：编写条件编译代码，针对不同平台调用不同的生命周期钩子或逻辑。

#### 六、总结

uni-app的生命周期与钩子函数是开发者在开发过程中不可或缺的工具，它们不仅帮助开发者控制应用的执行流程，还提供了优化性能和提升用户体验的手段。通过深入理解uni-app的生命周期机制，结合Vue实例生命周期、页面生命周期以及平台特有生命周期，开发者可以更加灵活地编写出高效、可维护的跨平台应用。在实际开发中，合理利用钩子函数，结合平台特性进行差异化处理，是提升应用质量和用户体验的关键。

该分类下的相关小册推荐：

web前端面试完全指南

WebGL开发指南

Web响应式布局入门到实战

vue高级应用开发与构建