UniApp 生命周期钩子的应用场景

UniApp 生命周期钩子的应用场景

应用生命周期钩子的应用场景

onLaunch
应用初始化 :在应用第一次启动时进行全局数据的初始化,比如设置全局配置信息、初始化用户登录状态等。例如,在应用启动时检查本地存储中是否有用户的登录信息,如果有则直接使用该信息进行后续操作,没有则跳转到登录页面。
第三方 SDK 初始化 :在应用启动时初始化一些第三方 SDK,如推送服务、统计分析工具等。比如,初始化友盟统计 SDK,以便后续统计应用的启动次数、用户行为等数据。
onShow
数据更新 :当应用从后台进入前台时,可能需要更新一些数据,如获取最新的消息通知、刷新页面数据等。例如,在电商应用中,当应用回到前台时,检查是否有新的订单消息。
定位更新 :每次应用进入前台时,可以重新获取用户的地理位置信息,以确保定位的准确性。
onHide
数据保存 :当应用进入后台时,将一些临时数据保存到本地存储中,防止数据丢失。比如,在游戏应用中,保存玩家当前的游戏进度。
资源释放 :释放一些不必要的资源,如停止正在播放的音乐、关闭网络连接等,以节省电量和内存。
onError
错误捕获与上报 :当应用发生错误时,捕获错误信息并上报到服务器,方便开发者及时发现和解决问题。例如,在应用中使用 Sentry 等错误监控工具,将错误信息发送到 Sentry 平台。
onUniNViewMessage
与 nvue 页面通信:监听来自 nvue 页面的消息,实现与 nvue 页面的交互。比如,在 nvue 页面中点击某个按钮,发送消息到主页面,主页面接收到消息后进行相应的处理。

页面生命周期钩子的应用场景

onLoad
数据初始化 :在页面加载时,进行数据的初始化操作,如获取页面参数、从服务器请求数据等。例如,在商品详情页,根据页面参数获取商品的详细信息。

网络请求:发起网络请求,获取页面所需的数据。比如,在新闻列表页,请求服务器获取新闻列表数据。
onReady
页面动画和交互 :在页面渲染完成后,进行页面动画和交互的初始化。例如,在页面加载完成后,添加一些动画效果,如淡入淡出、滑动等。
DOM 操作 :对页面的 DOM 元素进行操作,如获取元素的位置、大小等信息。比如,在页面渲染完成后,获取某个元素的高度,然后根据该高度调整其他元素的布局。
onShow
页面显示效果处理 :处理页面的显示效果和动画,如显示隐藏的元素、更新页面状态等。例如,在页面显示时,显示一些提示信息或更新页面的标题。
数据更新 :当页面再次显示时,更新页面的数据。比如,在购物车页面,当从商品详情页返回时,更新购物车中的商品数量。
onHide
页面隐藏效果处理 :处理页面的隐藏效果和动画,如隐藏某些元素、暂停动画等。例如,在页面隐藏时,隐藏一些不必要的元素,以节省资源。
数据缓存 :将页面的一些临时数据保存到本地存储中,以便下次打开页面时可以快速恢复。
onUnload
资源释放:在页面卸载时,释放一些不必要的资源,如取消定时器、销毁事件监听器等。例如,在页面卸载时,取消之前设置的定时器,避免内存泄漏。

组件生命周期钩子的应用场景

beforeCreate
初始化前的准备工作 :在组件实例被创建之前,进行一些初始化前的准备工作,如设置一些默认值、检查环境等。例如,检查当前设备是否支持某些功能,如果不支持则给出提示。
created
数据初始化 :在组件实例被创建之后,进行数据的初始化操作,如设置组件的初始数据、发起网络请求等。例如,在组件创建后,从服务器请求组件所需的数据。
beforeMount
渲染前的处理 :在组件被渲染之前,进行一些渲染前的处理,如修改组件的数据、添加一些全局变量等。例如,在组件渲染前,根据用户的权限设置组件的显示内容。
mounted
DOM 操作和交互 :在组件被渲染之后,进行 DOM 操作和交互的初始化。例如,在组件渲染完成后,添加事件监听器,实现组件的交互功能。
updated
数据更新后的处理 :在组件数据更新之后,进行一些数据更新后的处理,如更新 DOM 元素的样式、重新计算布局等。例如,当组件的数据更新后,更新页面上的图表显示。
beforeDestroy
销毁前的清理工作 :在组件实例被销毁之前,进行一些销毁前的清理工作,如取消定时器、销毁事件监听器等。例如,在组件销毁前,取消之前设置的定时器,避免内存泄漏。
destroyed
资源释放:在组件实例被销毁之后,释放一些不必要的资源,如清空数据、关闭网络连接等。例如,在组件销毁后,清空组件的数据,释放内存。

相关推荐
Jonathan Star2 小时前
沉浸式雨天海岸:用A-Frame打造WebXR互动场景
前端·javascript
工业甲酰苯胺3 小时前
实现 json path 来评估函数式解析器的损耗
java·前端·json
老前端的功夫3 小时前
Web应用的永生之术:PWA落地与实践深度指南
java·开发语言·前端·javascript·css·node.js
LilySesy3 小时前
ABAP+WHERE字段长度不一致报错解决
java·前端·javascript·bug·sap·abap·alv
Wang's Blog4 小时前
前端FAQ: Vue 3 与 Vue 2 相⽐有哪些重要的改进?
前端·javascript·vue.js
再希5 小时前
React+Tailwind CSS+Shadcn UI
前端·react.js·ui
用户47949283569155 小时前
JavaScript 的 NaN !== NaN 之谜:从 CPU 指令到 IEEE 754 标准的完整解密
前端·javascript
群联云防护小杜5 小时前
国产化环境下 Web 应用如何满足等保 2.0?从 Nginx 配置到 AI 防护实战
运维·前端·nginx
醉方休5 小时前
Web3.js 全面解析
前端·javascript·electron
前端开发爱好者6 小时前
前端新玩具:Vike 发布!
前端·javascript