vue3生命周期：
1. onBeforeMount - 组件挂载之前调用
- 触发时机：模板编译完成，但未挂载到 DOM 时。
- 典型用途：
- 初始化无需 DOM 的数据（如预处理数据格式）。
- 注册临时事件监听（如全局事件总线）。
- 准备挂载所需的配置参数。
onBeforeMount(() => {
// 预处理列表数据格式
rawList.value = rawList.value.map(item => ({ ...item, status: 'init' }));
// 注册全局事件
eventBus.on('refresh', handleRefresh);
});2. onMounted - 组件挂载完成后调用
- 触发时机：组件 DOM 已挂载，可访问真实节点。
- 典型用途：
- 操作 DOM（如获取元素尺寸、初始化 Canvas）。
- 加载依赖 DOM 的第三方库（如地图、图表）。
- 发起首次数据请求（非页面级的组件数据）。
onMounted(() => {
// 获取元素高度
const height = refDom.value?.offsetHeight;
// 初始化 ECharts 图表
const chart = echarts.init(refDom.value);
// 加载组件专属数据
fetchComponentData();
});3. onBeforeUpdate - 组件更新之前调用
- 触发时机：响应式数据变化，DOM 即将更新时。
- 典型用途：
- 记录更新前的 DOM 状态（如滚动位置）。
- 中断不必要的更新（如数据未实际变化时）。
- 清理更新前的临时数据。
onBeforeUpdate(() => {
// 记录滚动位置，更新后恢复
scrollTop.value = window.scrollY;
// 清理临时标记
tempFlag.value = false;
});4. onUpdated - 组件更新完成后调用
- 触发时机：DOM 已完成更新后。
- 典型用途：
- 基于新 DOM 执行操作（如重新计算元素位置）。
- 同步更新第三方库（如图表数据变化后重绘）。
- 恢复更新前记录的状态（如滚动位置）。
onUpdated(() => {
// 重绘图表
chart.setOption({ series: newData });
// 恢复滚动位置
window.scrollTo(0, scrollTop.value);
});5. onBeforeUnmount - 组件卸载之前调用
- 触发时机：组件即将卸载，DOM 尚未移除时。
- 典型用途：
- 确认是否允许卸载（如表单未保存时提示）。
- 移除全局事件监听或定时器。
- 保存组件当前状态（如临时草稿）。
onBeforeUnmount(() => {
// 提示未保存的表单
if (isDirty.value) confirm('数据未保存，确定离开？');
// 清除定时器
clearInterval(timer.value);
// 移除全局事件
eventBus.off('refresh', handleRefresh);
});6. onUnmounted - 组件卸载完成后调用
- 触发时机：组件已从 DOM 移除，所有子组件也已卸载。
- 典型用途：
- 释放大型资源（如销毁图表实例、关闭 WebSocket）。
- 清理内存泄漏风险的引用（如移除事件总线的所有监听）。
- 上报组件生命周期结束日志。
onUnmounted(() => {
// 销毁图表实例
chart.dispose();
// 关闭 WebSocket 连接
socket.close();
// 上报日志
reportEvent('component_unmounted', { name: 'UserCard' });
});vue3特殊生命周期钩子：
1. onActivated - 缓存组件激活时
触发时机：被
<keep-alive>缓存的组件重新显示时。典型用途：
- 恢复组件状态（如表单输入值、滚动位置）。
- 重启定时器或轮询请求。
- 刷新时效性数据（如实时消息数）。
示例：
onActivated(() => { // 恢复滚动位置 listRef.value?.scrollTo({ top: savedScrollTop.value }); // 重启消息轮询 startMessagePolling(); });
2. onDeactivated - 缓存组件失活时
触发时机：被
<keep-alive>缓存的组件隐藏时。典型用途：
- 暂存组件状态（如当前滚动位置、表单草稿）。
- 暂停定时器或轮询（避免后台无效消耗）。
- 停止视频 / 音频播放。
示例：
onDeactivated(() => { // 保存滚动位置 savedScrollTop.value = listRef.value?.scrollTop || 0; // 暂停轮询 stopMessagePolling(); // 暂停视频 videoRef.value?.pause(); });
3. onErrorCaptured - 捕获子组件错误
触发时机：子组件抛出错误时（包括生命周期、事件回调等）。
典型用途：
- 捕获并处理子组件错误（避免页面崩溃）。
- 记录错误日志（如错误堆栈、发生时间）。
- 显示友好的错误提示（替代白屏）。
示例：
onErrorCaptured((err, instance, info) => { // 记录错误日志 logError({ message: err.message, stack: err.stack, info }); // 显示错误提示 showErrorToast('组件加载失败，请重试'); // 返回 true 阻止错误继续向上传播 return true; });
4. onRenderTracked - 跟踪响应式依赖（调试用）
触发时机：组件渲染过程中，跟踪到响应式数据被使用时。
典型用途：
- 调试响应式依赖（如查看哪些数据影响了渲染）。
- 分析不必要的依赖（优化性能）。
示例：
onRenderTracked((event) => { // 打印跟踪到的依赖（开发环境用） console.log('跟踪到依赖:', event.target, '依赖属性:', event.key); });
5. onRenderTriggered - 响应式依赖触发更新（调试用）
触发时机：响应式数据变化导致组件重新渲染时。
典型用途：
- 调试意外的重渲染（如找到不合理的依赖导致的频繁更新）。
- 分析更新原因（哪个数据变化触发了渲染）。
示例：
onRenderTriggered((event) => { // 打印触发更新的原因（开发环境用） console.log('触发更新:', event.target, '变化的数据:', event.key); });
uniapp生命周期：
- onLaunch - 应用启动时触发（在 App.vue 中使用）
- 触发时机：被
<keep-alive>缓存的组件重新显示时。 - 典型用途：
- 恢复组件状态（如表单输入值、滚动位置）。
- 重启定时器或轮询请求。
- 刷新时效性数据（如实时消息数）。
- 触发时机：被
- onShow - 应用/页面显示时触发
- onHide - 应用/页面隐藏时触发
- onLoad - 页面加载时触发
- onReady - 页面初次渲染完成时触发
- onUnload - 页面卸载时触发
- onPullDownRefresh - 下拉刷新时触发
- onReachBottom - 页面滚动到底部时触发
1. onLaunch - 应用启动时（仅 App.vue）
触发时机：小程序 / 应用首次启动时（全局只触发一次）。
典型用途：
- 初始化全局数据（如用户信息、配置参数）。
- 检查登录状态（如 token 有效性）。
- 加载全局资源（如字体、主题配置）。
示例：
// App.vue 中 onLaunch(() => { // 检查本地存储的 token const token = uni.getStorageSync('token'); if (token) { initUserInfo(); // 初始化用户信息 } else { uni.navigateTo({ url: '/pages/login' }); // 跳转登录页 } });
2. onShow - 应用 / 页面显示时
触发时机：应用从后台切前台、页面从隐藏到显示时（包括首次加载）。
典型用途：
- 刷新页面数据（如首页商家列表、消息通知数）。
- 启动定时器（如倒计时、实时刷新）。
- 恢复播放音频 / 视频。
示例：
onShow(() => { // 刷新首页数据 fetchHomeData(); // 启动倒计时 countDownTimer.value = setInterval(updateCountDown, 1000); // 恢复视频播放 uni.createVideoContext('video').play(); });
3. onHide - 应用 / 页面隐藏时
触发时机：应用切后台、页面跳转至其他页面时。
典型用途：
- 暂停定时器 / 轮询（减少资源消耗）。
- 保存临时状态（如表单未提交内容）。
- 暂停媒体播放。
示例：
onHide(() => { // 清除倒计时 clearInterval(countDownTimer.value); // 保存表单草稿 uni.setStorageSync('formDraft', formData.value); // 暂停音频 uni.createInnerAudioContext().pause(); });
4. onLoad - 页面加载时
触发时机：页面首次创建并加载到页面栈时（仅一次）。
典型用途：
- 接收页面跳转参数（如
options.id）。 - 初始化页面基础数据（不依赖显示状态的数据）。
- 注册页面级事件（如监听全局状态变化）。
- 接收页面跳转参数（如
示例：
onLoad((options) => { // 获取路由参数（如商品 ID） goodsId.value = options.id as string; // 初始化基础配置 initPageConfig(); // 监听全局主题变化 store.watch((state) => state.theme, updateTheme); });
5. onReady - 页面初次渲染完成
触发时机：页面首次渲染完成（类似 Vue 的
onMounted，但针对页面）。典型用途：
- 执行依赖页面渲染的操作（如获取页面元素尺寸）。
- 初始化页面级第三方库（如地图组件）。
- 调整页面布局（如动态设置导航栏样式）。
示例：
onReady(() => { // 获取滚动容器高度 uni.createSelectorQuery().select('#scroll-view').boundingClientRect((rect) => { scrollHeight.value = rect.height; }).exec(); // 初始化地图 initMap(); });
6. onUnload - 页面卸载时
触发时机：页面从页面栈中移除（如
uni.redirectTo/uni.navigateBack导致销毁）。典型用途：
- 清理页面级资源（如关闭页面专属的 WebSocket）。
- 移除全局事件监听（避免内存泄漏）。
- 提交页面最终状态（如保存用户操作记录）。
示例：
onUnload(() => { // 关闭页面 WebSocket 连接 pageSocket.close(); // 移除全局事件 uni.off('globalEvent', handleGlobalEvent); // 上报页面停留时长 reportStayTime(pageId.value, stayTime.value); });
7. onPullDownRefresh - 下拉刷新时
触发时机：用户下拉页面触发刷新（需在
pages.json中配置允许下拉）。典型用途：
- 强制刷新页面数据（如列表重置为第一页）。
- 重置页面状态（如清空筛选条件）。
示例：
onPullDownRefresh(() => { // 重置页码并重新请求数据 currentPage.value = 1; fetchListData().then(() => { uni.stopPullDownRefresh(); // 停止下拉刷新动画 }); });
8. onReachBottom - 页面滚动到底部
触发时机：页面滚动至底部（可在
pages.json中配置距离底部的阈值）。典型用途：
- 实现分页加载（如加载下一页数据）。
- 显示 “回到顶部” 按钮。
示例：
onReachBottom(() => { // 加载下一页数据（避免重复请求） if (!isLoading.value && hasMore.value) { currentPage.value++; fetchListData(); } // 显示回到顶部按钮 showBackToTop.value = true; });
