Vue学习：23-生命周期

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

一、beforeCreate

a. beforeCreate选项式生命周期函数

b. 在组件实例初始化之前调用（props解析已解析、data和computed等选项还未处理）

c. 不能访问组件的实例this及其组件中的数据源和函数等

d. 不能访问组件中的视图DOM元素

e. 组合式 API 中的setup()钩子会在所有选项式 API 钩子之前调用

二、created

a. created选项式生命周期函数

b. 在组件实例化成功后调用

c. 可访问组件的实例this及其组件中的数据源和函数等

d. 不能访问组件中的视图DOM元素

三、beforeMount/onBeforeMount

a. beforeMount：选项式生命周期函数、onBeforeMount：组合式生命周期钩子

b. 组件视图在浏览器渲染之前调用

c. 可访问组件实例东西（数据源、函数、计算属性等）

d. 不能访问组件视图中的DOM元素

四、mounted/onMounted

a. mounted：选项式生命周期函数、onMounted：组合式生命周期钩子

b. 组件视图在浏览器渲染之后调用

c. 可访问组件实例东西（数据源、函数、计算属性等）

d. 可以访问组件视图中的DOM元素

五、beforeUpdate/onBeforeUpdate

a. beforeUpdate：选项式生命周期函数、onBeforeUpdate：组合式生命周期钩子

b. 数据源发生变化时，组件视图重新渲染之前调用

c. 可访问组件实例东西（数据源、函数、计算属性等）

d. 可以访问该组件中在更新之前的DOM元素，但是不能访问该组件中在更新之后的DOM元素

六、updated/onUpdated

a. updated：选项式生命周期函数、onUpdated：组合式生命周期钩子

b. 数据源发生变化时，组件视图重新渲染之后调用

c. 可访问组件实例东西（数据源、函数、计算属性等）

d. 不可以访问该组件中在更新之前的DOM元素，但是可以访问该组件中在更新之后的DOM元素

七、beforeUnmount/onBeforeUnmount

a. beforeUnmount：选项式生命周期函数、onBeforeUnmount：组合式生命周期钩子

b. 组件实例被卸载之前调用

c. 可访问组件实例东西（数据源、函数、计算属性等）

d. 可以访问组件视图中的DOM元素

八、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>

<!-- 视图区域（view） -->
<template>
  <h3>APP组件</h3>
  <input type="checkbox" v-model="isShow">是否显示子组件
  <hr>
  <SonVue v-if="isShow"/>
</template>
<style>
 
</style>

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>