Vue中的“对象生命周期监听器”实为生命周期钩子函数，响应组件从创建、挂载、更新到销毁的全过程；created时data已就绪但DOM不可访问，mounted时DOM可用；需在beforeUnmount/beforeDestroy中手动清理定时器、事件等以防内存泄漏。

Vue 中的“对象生命周期监听器”实际指的就是生命周期钩子函数，它们不是专门监听某个变量，而是响应整个组件实例从创建、挂载、更新到销毁的全过程。所谓“变量创建与销毁”，在 Vue 中需理解为：数据属性（data）在 created 阶段才完成初始化；而组件销毁时（beforeDestroy/unmounted），其内部所有响应式数据、事件、定时器等资源才真正释放——这才是真正需要监听和干预的“生命周期节点”。

什么时候能安全访问 data 和 DOM？

关键在于区分“数据就绪”和“视图就绪”两个时间点：

• created：data、methods、computed 已初始化，可发起 API 请求、设置初始状态，但 this.$el 还是 undefined，不能操作 DOM
• mounted：模板已编译并挂载到真实 DOM，this.$el 可用，适合初始化第三方库（如 Chart.js）、聚焦输入框、启动定时器

如何避免内存泄漏？重点在销毁前清理

组件销毁不等于自动回收所有资源。若在 mounted 中设置了定时器、事件监听或全局订阅，必须手动清除：

• 在 beforeUnmount（Vue 3）或 beforeDestroy（Vue 2）中清理：清除 setInterval、addEventListener、$on 订阅、取消未完成的请求（如用 AbortController）
• 错误做法：只在 destroyed/unmounted 中清理——此时组件实例已解绑，this 不再可靠，部分回调可能已失效或报错

响应式数据变化 ≠ 触发 created/mounted

很多人误以为 v-model 改变或 watch 监听会再次走生命周期。实际上：

• 只有组件首次创建/挂载、或被 v-if 销毁重建时，才会触发 created → mounted
• 数据更新走的是 beforeUpdate → updated，仅用于响应视图重渲染，不涉及实例重建
• 想监听某一个变量变化，请用 watch，它和生命周期钩子职责不同，不可互相替代

Vue 2 与 Vue 3 的钩子命名差异要留意

项目升级或混合使用时容易出错，核心对应关系如下：

• Vue 2：beforeDestroy / destroyed
• Vue 3（Composition API）：onBeforeUnmount / onUnmounted
• Vue 3 Options API 仍兼容 Vue 2 写法，但官方推荐新命名；setup() 是最早执行的逻辑入口，早于 beforeCreate