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
资源释放:在组件实例被销毁之后,释放一些不必要的资源,如清空数据、关闭网络连接等。例如,在组件销毁后,清空组件的数据,释放内存。

相关推荐
子兮曰3 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰3 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万3 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝3 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋3 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁3 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
汉堡大王95273 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大3 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师3 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端
沙蒿同学3 天前
我用 Go 搭了一条 AI Agent 流水线:从 1 张商品图到一整套淘宝详情页
前端·javascript·后端