vue3和uniapp的生命周期

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(() => {// 检查本地存储的 tokenconst 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;
  });