vue组件生命周期钩子需严格按顺序使用：dom操作必须在mounted中执行，created中不可访问$el；updated中禁止修改响应式数据以防死循环；销毁前须在beforeunmount/beforedestroy中清理定时器和事件监听；组合式api中setup无this，应通过ref/reactive管理状态。
Vue 组件生命周期钩子不是“写了就能用”的工具函数，而是一套有严格执行顺序和上下文约束的机制。用错时机、混淆阶段、忽略 this 指向，都会直接引发 DOM 操作失败、内存泄漏或无限更新循环。
DOM 操作必须等到 mounted 之后
created 阶段数据已就绪，但模板尚未渲染，$el 为空，所有基于真实 DOM 的操作（如 getElementById、$refs 访问、第三方库初始化）都会失败。
- ✅ 正确做法：DOM 相关逻辑统一放在 mounted 中
- ❌ 常见错误：在 created 里调用 document.querySelector 或 this.$refs.xxx.value
- ⚠️ 特别注意：即使 created 中发了异步请求，也不能保证 mounted 时 DOM 已就绪——要等模板实际渲染完成，才能安全访问元素
避免在 updated 中修改响应式数据
updated 在每次 DOM 更新后触发，此时若再次改变 data 或 props，会触发新一轮更新，极易形成死循环。
- ✅ 安全做法：仅在 updated 中执行副作用，比如聚焦输入框、滚动定位、图表重绘
- ❌ 危险操作：在 updated 里调用 this.setData()、this.list.push() 或赋值 this.loading = false
- ? 替代方案：用 watch 监听特定数据变化，比在 updated 里盲目响应更精准可控
销毁前必须手动清理异步资源
组件卸载时，Vue 不会自动清除 setTimeout、setInterval、addEventListener 或未完成的 Promise 请求，这些残留会继续执行并尝试访问已销毁组件的 this，导致报错或内存泄漏。
- ✅ 标准清理：在 beforeUnmount（Vue 3）或 beforeDestroy（Vue 2）中清除定时器、取消请求、移除事件监听
- ❌ 典型疏漏：只在 mounted 里启动定时器，却忘了在销毁前 clearTimeout
- ? 实用技巧：把 timerId / controller 存在组件实例上（如 this.timer = setTimeout(...)），确保能被正确引用和清除
组合式 API 中的钩子需注意 this 语义缺失
setup() 中没有 this，onMounted、onUpdated 等钩子接收的是当前组件作用域内的 reactive 数据和方法，不能直接访问选项式 API 中的 this.xx。
- ✅ 正确写法：用 ref 或 reactive 声明状态，在 onMounted 回调中通过解构或变量直接使用
- ❌ 错误写法：在 onMounted 里写 this.message = 'hello'（setup 中 this 是 undefined）
- ⚠️ 注意箭头函数：setup 内定义的箭头函数会捕获外层作用域，但无法绑定组件实例；需要访问响应式对象时，应明确传入或从 setup 返回
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
