Vue3入门指北（九）生命周期钩子

前言

我们知道每个Vue组件在整个生命周期都会经历很多步骤，比如组件初始化、template模板的编译、把实例挂载挂载到相应的DOM节点，还有组件数据更新以及卸载的时候。而在这些阶段，Vue官方为我们提供相应阶段的生命周期钩子函数，以便我们在Vue组件相应的阶段运行自己的代码。

生命周期

废话少说，先上图：

onMounted()

当我们想在组件初始渲染完成，并且相应的DOM节点创建完成之后，来执行代码的时候，我们就可以调用onMounted钩子函数。

<script setup>
import { onMounted } from 'vue'
onMounted(() => {
  console.log(`组件初始渲染完成.`)
})
</script>
复制代码

我们可以看到onMounted接受一个回调函数，我们可以在回调函数内部，添加我们想要运行的代码。

有一点需要注意的是，钩子函数必须在组件初始化时同步注册。因为当钩子函数被执行时，相应的回调函数也会注册到相应的初始化组件上。

setTimeout(() => {
  onMounted(() => {
  })
}, 200)
复制代码

如上，如果我们把钩子函数放到setTimeout里面的话，会导致回调函数注册的时候，该组件实例已丢失。也就意味着，回调函数中的代码并不会执行。

onUpdated()

当我们想在组件内部的响应式属性更新导致DOM结构更新的时候，执行相应的代码，我们就可以调用onUpdated钩子函数：

<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
  console.log(`组件更新.`)
})
</script>
复制代码

该钩子函数并不会在服务端渲染的时候被调用。而且不要在钩子函数里改变组件的状态，这将导致无限循环。

还有一点要注意的是，父组件的更新钩子会在其子组件的更新钩子之后调用。