组件的一生

万物皆有灵，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 已经渲染好了，对吧？

错！如果你的组件里面有 v-if 或者异步组件，onMounted 触发的时候，子组件可能还没渲染完！这时候拿到的高度是 0。解决办法是用 nextTick，或者检查你的组件结构。

为什么会这样？

回想起刚开始接触 Vue 的时候，那时候的快乐是纯粹的。写一个 {{ message }} 就能看到页面变化，那种成就感无与伦比。而现在，我们要处理复杂的依赖关系、难以捉摸的类型定义、层出不穷的构建工具配置。难道这就是成长的代价吗？

我们先来聊聊 Vue 生命周期的核心概念。在官方文档中，这一部分被描述得非常晦涩难懂。我花了整整三天时间查阅源码，翻遍了 GitHub 上的 Issues，才勉强理解了其中的奥妙。简单来说，它就像是一个黑盒子，你输入 A，它输出 B，但中间发生了什么，只有上帝和尤雨溪知道。

代码示例方面，我尝试写了一个 Demo，结果控制台满屏飘红。这哪里是写代码，简直是在扫雷。每一个变量的定义都充满了不确定性，每一个函数的调用都像是在赌博。

生老病死