【Vue3 基础篇】05.组件化

生命周期和模板引用

在本章之前，我们通过响应式 API 和声明式渲染，处理了 DOM 的更新，但光是这些，对于一些复杂的需要手动操作 DOM 的情况，之前介绍的就无法满足了。

生命周期

每个 Vue 组件在创建时经历的一系列初始化步骤的阶段，我们需要在这些阶段做额外操作的话，需要调用对应阶段的钩子。

这些阶段包括：设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM 等。Vue 官方给出了图示，可以帮助我们更好的理解生命周期：

• setup：红色的所有生命周期 API 都在组件的 setup() 阶段被同步调用。
• 红色方框：不同阶段代表的生命周期，后续我们写的 生命周期钩子 会在此阶段执行。
• 主轴上的：代表组件从初始化到卸载的主要事件。

这里我们先简单介绍，在介绍完生命周期钩子之后，相信你会更理解这张图。

生命周期钩子

了解了上述的生命周期，我们想在对应的周期做一些事情的话，在 Vue3 中我们使用 onXxx 的生命周期钩子，例如：

<script setup