当海风翻页时

组件与生命周期#

一个 .vue 文件就是一个组件。组件可以复用、可以嵌套，整个应用是一棵组件树，每个组件实例都有自己的生命周期。

在 <script setup> 中 import 之后就能在模板里使用组件，不用注册，也不用写 components 选项。组件名不要用 div、p、button 这类内置标签名。

生命周期指组件从创建、挂载、更新到卸载的全过程。想在哪一步插入代码，就在组件里注册对应的钩子。

setup 的执行时机#

setup() 在所有选项式 API 钩子之前调用，beforeCreate() 也不例外，见 beforeCreate 文档。

所以组合式 API 没有提供 beforeCreate 和 created 的对应钩子。这两个钩子的初始化工作，已经在 setup() 里做完了。

挂载阶段#

onBeforeMount 在挂载开始前调用。此时响应式状态已经就绪，但 DOM 节点还没有创建，拿不到元素。

onMounted 在挂载完成后调用。此时可以访问 DOM，也可以发请求、初始化定时器、绑定事件监听。

1
<script setup>
2
import { onMounted, onBeforeUnmount, ref } from 'vue'
3

4
const count = ref(0)
5
let timer
6

7
onMounted(() => {
8
  timer = setInterval(() => count.value++, 1000)
9
})
10

11
onBeforeUnmount(() => {
12
  clearInterval(timer)
13
})
14
</script>

更新阶段#

onBeforeUpdate 在响应式状态变化后、DOM 重新渲染前调用。数据已经是新值，DOM 还是旧的，适合在更新前记录 DOM 状态。

onUpdated 在 DOM 更新完成后调用，可以读取最新的 DOM。一次渲染可能由多处状态变化触发，需要精确对应某次修改时，用 nextTick() 更合适。

卸载阶段#

onBeforeUnmount 在实例卸载前调用，此时组件实例的功能还完整。清理定时器、解绑事件监听、取消未完成的请求都放在这里。

onUnmounted 在实例卸载后调用。此时所有响应式作用都已停止，子组件实例也已经卸载。

选项式与组合式对照#

其他钩子#

下面六个钩子不属于上面三个阶段，按需使用。