Vue生命周期：onMounted与onUnmounted使用

理解onMounted与onUnmounted的生命周期时机

在Vue 3的组合式API中，组件的生命周期被抽象为一系列可组合的钩子函数。onMounted与onUnmounted分别对应组件挂载完成与卸载销毁的关键节点。当组件实例被创建并完成虚拟DOM到真实DOM的渲染后，Vue会将该DOM节点插入到父级或根容器中，此时触发onMounted回调。这意味着开发者可以安全地访问组件内的真实DOM元素或执行依赖DOM布局的第三方库初始化。相反，当组件因路由切换、条件渲染（如v-if变为false）或父组件销毁而被移除时，Vue会先清理子组件与指令，随后触发onUnmounted。该钩子标志着组件实例及其关联的响应式依赖即将被彻底回收。在Composition API中，这两个钩子必须在setup函数或<script setup>顶层同步调用，以确保Vue能正确追踪其执行上下文，避免在异步回调中注册导致生命周期失效。

使用onMounted执行初始化逻辑

onMounted是执行组件初始化逻辑的最佳时机，因为此时组件的真实DOM已经渲染完毕并挂载到页面中。若在setup顶层或onBeforeMount中尝试通过ref获取DOM节点，往往会得到null，因为渲染尚未完成。典型的应用场景包括：通过document.getElementById或ref.value获取画布元素并初始化ECharts图表；使用window.addEventListener绑定窗口尺寸变化事件以适配响应式布局；或者调用setInterval启动轮询接口获取实时数据。例如，在onMounted(() => { const el = chartRef.value; if (el) initChart(el); window.addEventListener('scroll', onScroll); })中，所有依赖页面实际渲染状态的操作都能稳定执行。将此类逻辑置于挂载后，不仅符合浏览器渲染管线规范，还能有效避免操作未定义DOM引发的运行时错误，确保副作用在正确的执行上下文中安全启动。

使用onUnmounted清理组件资源

组件在运行期间往往会创建各类外部副作用，若不在销毁前妥善清理，将直接导致内存泄漏或幽灵事件。onUnmounted的核心职责便是执行资源回收，确保创建与清理成对出现。例如，在onMounted中通过addEventListener绑定的全局事件，必须在onUnmounted中调用removeEventListener并传入完全相同的回调函数引用，否则事件监听器会持续驻留内存。对于定时器，需保存setInterval或setTimeout返回的ID，并在卸载时调用clearInterval或clearTimeout。若使用了WebSocket订阅或第三方状态管理库的监听，也应在此阶段调用对应的unsubscribe或disconnect方法。代码结构通常表现为：const timer = setInterval(...); onUnmounted(() => { clearInterval(timer); window.removeEventListener('resize', handler); });。严格遵循这一配对原则，可彻底切断组件与外部环境的隐式关联，保障应用长期运行的稳定性。

实战验证与常见避坑

在实际开发中，可通过路由切换或v-if控制组件显隐来验证生命周期执行效果。在浏览器控制台打印日志可清晰观察到：进入页面时onMounted触发，离开时onUnmounted触发。若未正确清理，重复进入页面会导致事件监听器叠加，引发回调函数多次执行；定时器未清除则会在后台持续消耗性能甚至报错。常见避坑要点包括：第一，避免在onMounted中访问尚未渲染的DOM，应确保模板已编译完成；第二，切勿在异步函数内部直接调用生命周期钩子，Vue无法追踪异步上下文中的注册，应改为在钩子内部发起异步操作；第三，使用ref绑定DOM时，需判断ref.value是否存在再操作；第四，对于动态组件或keep-alive包裹的组件，卸载钩子可能不会触发，此时应改用onDeactivated进行清理。通过规范的日志验证与严格的资源管理，可彻底规避生命周期滥用带来的隐蔽缺陷。