组件交付前该检查哪些问题
Vue3 应用发布前，除了功能验收，还应检查路由切换后的副作用清理、响应式赋值方式和构建产物。清单应服务于项目风险，而不是把每一条经验变成无条件的禁令。
1. 发布前常被忽略的检查项
以下问题在发布前较容易遗漏：
- 独立创建的副作用未清理：在组件作用域内创建的
watch会随组件卸载停止；但手动创建的effectScope、事件监听器、计时器和组件外副作用需要明确清理。 reactive对象被错误替换：异步获取数据后重新绑定局部变量，不会更新原先被模板追踪的代理对象，界面可能仍展示旧状态。- 第三方实例进入深层响应式：ECharts、Mapbox 或 Canvas 实例通常不需要被深度追踪。可使用
shallowRef或markRaw，并在实际场景中确认初始化与销毁是否成对。
这些问题未必都会发生，但在长时间运行、频繁切换路由或复杂图表场景中值得专项验证。
2. Vue3 交付前 4 维检查流程
可在合并前按下面四个维度检查：
检查项应结合代码扫描、路由压测和目标浏览器验证；通过与否的标准由当前项目的风险和预算决定。
3. Vue3 副作用清理示例
下面是用 TypeScript + Vue3 编写的自动化内存与副作用管理 Hook。它提供了自动生命周期绑定和游离作用域防护功能：
import { onUnmounted, effectScope, EffectScope, ref, ComponentInternalInstance, getCurrentInstance } from 'vue'; /** * 在组件 setup 内创建的 scope 会在卸载时停止；组件外调用者需自行调用 stop。 */ export function useAutoDisposeScope() { const scope: EffectScope = effectScope(); // 如果在组件 setup 内部调用，自动绑定 onUnmounted if (getCurrentInstance()) { onUnmounted(() => { scope.stop(); console.log('[Vue3-Audit] 已成功注销局部 EffectScope 作用域，防止副作用泄漏。'); }); } return { run: scope.run.bind(scope), stop: scope.stop.bind(scope) }; } /** * 2. 生产环境 DOM / 事件监听自动回收工具 Hook */ export function useEventListener( target: EventTarget | window & typeof globalThis, event: string, handler: EventListenerOrEventListenerObject ) { target.addEventListener(event, handler); const cleanup = () => { target.removeEventListener(event, handler); }; if (getCurrentInstance()) { onUnmounted(() => { cleanup(); }); } return cleanup; } /** * 3. 生产环境复杂对象代理防护器 (自动 markRaw 处理) */ import { markRaw } from 'vue'; export function useNonReactiveInstance<T extends object>(factory: () => T): { get: () => T } { // 此处不需要追踪 SDK 实例内部字段，使用 markRaw 避免将其转换为 Proxy。 const rawInstance = markRaw(factory()); return { get: () => rawInstance }; }4. 交付前检查清单
在代码打包上线前，对照下面这 6 条检查标准进行最后卡点：
- 副作用绑定：检查所有的
watch、setTimeout、setInterval和window.addEventListener，确认在组件卸载时已调用对应的销毁逻辑。 - 响应式赋值：不要重新绑定由
reactive()创建的变量；更新对象可使用Object.assign，需要整体替换时使用ref。 - 解构安全：如果解构的是
reactive对象，使用toRefs/toRef保持字段响应性；若 Composable 本就返回ref，可直接解构。 - 实例浅层化：检查 ECharts、Mapbox、Canvas 等 SDK 实例是否需要深度追踪；多数情况下使用
shallowRef或markRaw更合适。 - 样式作用域：确认全局样式、
scoped与 CSS Modules 的使用边界，避免无意覆盖；并非所有 SFC 都必须使用scoped。 - 打包资源体积：使用项目已有的构建分析工具检查产物，并根据压缩体积、首屏依赖和网络预算设定阈值。
5. 结语
发布前检查的价值在于尽早暴露可复现的问题。把副作用、响应式赋值、第三方实例和构建预算纳入自动化或手工验证，并记录项目特有的例外，清单才会持续有效。
