380 字
1 分钟
生命周期钩子：生老病死，Vue 组件的一生
组件的一生
万物皆有灵，Vue 组件也不例外。它们从被创建（Creation），到挂载（Mounting），到更新（Updating），最后销毁（Unmounting），走完了一生。而我们开发者，就是那个掌握生杀大权的神。
Vue 3 的变化
在 Vue 2 中，我们熟悉的是 created, mounted, destroyed。在 Vue 3 的 Composition API 中，这些变成了 onMounted, onUnmounted 等等。
最让我困惑的是 setup()。它在 beforeCreate 和 created 之前执行。这意味着在 setup 里面，我们不需要写这一类的钩子了，直接写逻辑就行。
实际应用中的坑
我曾经遇到过一个 Bug，在 onMounted 里面去获取 DOM 元素的高宽。理论上这时候 DOM 已经渲染好了，对吧？
onMounted 能保证当前组件的 DOM 已经插入，并等待同步子组件挂载，但不会替你等待异步组件或网络数据。nextTick 只等待当前这轮 DOM 更新；如果尺寸依赖异步内容，更稳妥的做法是监听数据完成、让子组件发出 ready 事件，或者使用 ResizeObserver。
为什么会这样？
真正让我绕晕的不是钩子名字，而是“谁在等谁”：父组件、同步子组件、异步组件和数据请求有各自的完成时机。把依赖条件写清楚，比在所有地方补一个 nextTick 靠谱得多。
分享
如果这篇文章对你有帮助，欢迎分享给更多人！
生命周期钩子：生老病死，Vue 组件的一生
https://blog.luozili.work/posts/vue-learning-4/ 部分信息可能已经过时
相关文章 智能推荐
1
Ref vs Reactive：响应式的哲学思考 (头秃篇)
Vue学习之路 对比 Vue 3 中 ref 与 reactive 的使用边界，以及解构、替换对象和模板自动解包时容易踩到的坑。
2
组件通信：Props 传值传到手抽筋
Vue学习之路 对比 Props/Emit、v-model、Provide/Inject 与全局状态等组件通信方式，避免把简单关系写成事件迷宫。
3
Composition API：逻辑复用的快乐与痛苦
Vue学习之路 记录用 Composable 提取 Vue 3 业务逻辑时的收益、边界，以及逻辑复用过度后出现的新复杂度。
4
深坑记录：响应式丢失的那一夜
Vue学习之路 复盘一次保存成功但列表不更新的问题，定位对象解构导致的 Vue 响应式丢失，并总结排查顺序。
5
Vue 3 启航
Vue学习之路 从 jQuery 时代的回忆出发，记录第一次系统学习 Vue 3、Vite 与组合式 API 的过程。