uni-app 生命周期:管理应用状态和响应平台特定事件

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_优快云博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

uni-app 的生命周期与标准的 Vue.js 生命周期类似，但由于 uni-app 需要支持多平台，因此它还有一些特定的生命周期钩子。

Vue 生命周期钩子

uni-app 支持以下 Vue.js 的生命周期钩子：

• beforeCreate: 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
• created: 在实例创建完成后被立即调用。
• beforeMount: 在挂载开始之前被调用。
• mounted: el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
• beforeUpdate: 数据更新时调用，发生在虚拟 DOM 打补丁之前。
• updated: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
• beforeDestroy: 实例销毁之前调用。在这一步，实例仍然完全可用。
• destroyed: Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

uni-app 特定生命周期钩子

uni-app 还提供了一些特定的生命周期钩子，用于处理跨平台的特定情况：

• onLaunch: 当 uni-app 初始化完成时触发（全局只触发一次）。
• onShow: 当 uni-app 启动，或从后台进入前台显示，会触发 onShow。
• onHide: 当 uni-app 从前台进入后台时触发。
• onError: 当 uni-app 发生脚本错误，或者 api 调用失败时触发，并带上错误信息。
• onPageNotFound: 当 uni-app 找不到页面时触发。

生命周期钩子的使用

在 uni-app 中，你可以在页面或组件的 <script> 标签内使用这些生命周期钩子，例如：

<script>
export default {
data() {
return {
// 数据定义
};
},
onLoad(options) {
// 页面创建时执行
},
onShow() {
// 页面显示时执行
},
onHide() {
// 页面隐藏时执行
},
methods: {
// 方法定义
}
};
</script>

总结

了解 uni-app 的生命周期钩子对于管理应用状态和响应平台特定事件非常重要。通过合理利用这些生命周期钩子，你可以更好地控制应用的初始化、显示、隐藏以及错误处理等行为。