前言：

每个Vue组件实例在创建时都需要经历一系列的初始化步骤，比如数据侦听，编译模板，挂载实例到DOM，以及在数据改变时更新DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。最常用的是created、mounted、updated和unmounted。

vue3.0生命周期图例

在这里插入图片描述

1.beforeCreate

  a. beforeCreate选项式声明周期函数
  b. 在组件实例初始化之前调用（props解析已解析、data和computed等选项还未处理）
  c. 不能访问组件的实例this及其组件中的数据源和函数等
  d. 不能访问组件中的视图DOM元素
  e. 组合式 API 中的setup()钩子会在所有选项式 API 钩子之前调用

2.created

  a. created选项式生命周期函数
  b. 在组件实例化成功后调用
  c. 可访问组件的实例this及其组件中的数据源和函数等
  d. 不能访问组件中的视图DOM元素

3.beforeMount/onBeforeMount

  a. beforeMount：选项式生命周期函数、onBeforeMount：组合式生命周期钩子
  b. 组件视图在浏览器渲染之前调用
  c. 可访问组件实例东西（数据源、函数、计算属性等）
  d. 不能访问组件视图中的DOM元素

4.mounted/onMounted

  a. mounted：选项式生命周期函数、onMounted：组合式生命周期钩子
  b. 组件视图在浏览器渲染之后调用
  c. 可访问组件实例东西（数据源、函数、计算属性等）
  d. 可以访问组件视图中的DOM元素

5.beforeUpdate/onBeforeUpdate

a. beforeUpdate：选项式生命周期函数、onBeforeUpdate：组合式生命周期钩子
b. 数据源发生变化时，组件视图重新渲染之前调用
c. 可访问组件实例东西（数据源、函数、计算属性等）
d. 可以访问该组件中在更新之前的DOM元素，但是不能访问该组件中在更新之后的DOM元素

6.updated/onUpdated

a. updated：选项式生命周期函数、onUpdated：组合式生命周期钩子
b. 数据源发生变化时，组件视图重新渲染之后调用
c. 可访问组件实例东西（数据源、函数、计算属性等）
d. 不可以访问该组件中在更新之前的DOM元素，但是可以访问该组件中在更新之后的DOM元素

7.beforeUnmount/onBeforeUnmount

a. beforeUnmount：选项式生命周期函数、onBeforeUnmount：组合式生命周期钩子
b. 组件实例被卸载之前调用
c. 可访问组件实例东西（数据源、函数、计算属性等）
d. 可以访问组件视图中的DOM元素

8.unmounted/onUnmounted

a. unmounted：选项式生命周期函数、onUnmounted：组合式生命周期钩子
b. 组件实例被卸载之后调用
c. 可访问组件实例东西（数据源、函数、计算属性等）
d. 不可以访问组件视图中的DOM元素
e. 一般在这个生命周期函数里，我们可以手动清理一些副作用，例如计时器、DOM事件监听器或者与服务器的连接

案例：

// App.vue
<script setup>
import { ref } from 'vue';
import SonVue from './components/Son.vue'

let isShow = ref(false)
</script>

<template>
   <h3>APP 组件</h3>
   <input type="checkbox" v-model="isShow"> 是否显示子组件
   <hr>
   <SonVue v-if="isShow"/>
</template>

// Son.vue
<script setup>
import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref } from 'vue';

let age = ref(30)

function showMessage() {
    console.log('HELLO')
}

// 组件视图渲染之前
// 能访问组件实例的东西（数据源、函数等）
// 但是不能访问组件视图中的 DOM 元素
onBeforeMount(() => {
    console.log('------------------------')
    console.log('onBeforeMount 组件视图渲染之前（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log('不能访问组件视图中的 DOM 元素');
    // console.log(document.getElementById('title').innerHTML)
})

// 组件视图渲染之后
// 能访问组件实例的东西（数据源、函数等）
// 可以访问组件视图中的 DOM 元素
onMounted(() => {
    console.log('------------------------')
    console.log('onMounted 组件视图渲染之后（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
})

// 数据源发生变化，组件视图重新渲染之前
// 能访问组件实例的东西（数据源、函数等）
// 能访问组件视图渲染之前的 DOM 元素
onBeforeUpdate(() => {
    console.log('------------------------')
    console.log('onBeforeUpdate 数据源发生变化，组件视图重新渲染之前（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
})

// 数据源发生变化，组件视图重新渲染之后
// 能访问组件实例的东西（数据源、函数等）
// 能访问组件视图渲染之后的 DOM 元素
onUpdated(() => {
    console.log('------------------------')
    console.log('onUpdated 数据源发生变化，组件视图重新渲染之后（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
})

// 组件卸载之前
// 能访问组件实例的东西（数据源、函数等）
// 能访问组件视图 DOM 元素
onBeforeUnmount(() => {
    console.log('------------------------')
    console.log('onBeforeUnmount 组件卸载之前（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log(document.getElementById('title').innerHTML)
}) 

// 组件卸载之后
// 能访问组件实例的东西（数据源、函数等）
// 不能访问组件视图 DOM 元素
onUnmounted(() => {
    console.log('------------------------')
    console.log('onUnmounted 组件卸载之后（生命周期钩子）')
    console.log(age.value)
    showMessage()
    console.log('不能访问组件视图中的 DOM 元素');
    // console.log(document.getElementById('title').innerHTML)
}) 

</script>

<template>
    <h3 id="title">
        <i>年龄：{{ age }}</i>
    </h3>
    <button @click="(age = 70)">年龄改成 70</button>
    <button @click="(age = 30)">年龄改成 30</button>
</template>