1、生命周期的作用

简单来说，就是能够让我们在特定的时间执行特定的代码

2、简单介绍各个生命周期函数

我们能够在vue官网生命周期上面看到这样的一张图片

根据官网给我们提供的这张图片，不难得出其实生命周期分为4类8个

2.1、beforeCreate和created

2.1.1、介绍

beforeCreate这个阶段无论是数据还是dom都是没有的，也获取不到。created这个阶段可以访问数据，但是dom还是不能获取

2.2、onBeforeMount和onMounted

这两个生命周期的执行时机在页面挂载前后执行

2.2.1、代码演示部分

import { onBeforeMount,onMounted } from 'vue';
// import { onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onMounted } from 'vue'


onMounted(()=>{
  console.log("bbbb");
})

onBeforeMount(()=>{
  console.log("aaaa");
})

2.2.2、结果

我们知道js的执行机制是从上往下依次执行，按照代码中所写，应该在控制台先打印出"bbbb",再打印出"aaaa",但是结果不然，这就是在生命周期影响下发生的结果

2.3、beforeUpdate和updated

这两个生命周期函数的执行时机是在页面内容发生改变时执行

2.3.1、代码演示部分

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div v-if="show">我出来了</div>
    <a @click="click()">点击</a>
  </div>
</template>

<script setup>

import { onBeforeUpdate,onUpdated,ref } from 'vue';

onBeforeUpdate(()=>{
  console.log("页面发生改变");
})


onUpdated(()=>{
  console.log("页面改变完毕");
})

const show = ref(false)

const click = () =>{
  show.value = true
}

</script>

2.3.2、结果

当我们点击超链接时，修改了show的值，由于show作为v-if的判断值，最终触发这两个生命周期函数。

2.3.3、拓展

当我在这两个生命周期去看show的值的时候，发生了一件我意料之外的事情

没有点击button之前

点击button之后

可以比较明显的观察到，show的值在两个生命周期中的值是一致的，这个是为什么呢？这就不得不提到vue的渲染机制了，vue会将在一个时间片中发生的所有改变集中到一起执行。什么意思呢？就是比如这个时间片的时间是50ms,那么在这个时间内发生的所有改变，只会在到达50ms的时候统一改变。这也是为什么两个生命周期函数中的值一样的根本原因。在我们点击button,show的值发生改变之后，由于时间片还没有到达，所以页面还不会发生改变，到页面即将发生改变之前，也就是onBeforeUpdate，show的值早已经发生了改变，所以为true

2.4、beforeUnmount和unmounted

这两个生命周期函数的执行时机在页面被取消挂载前后

2.4.1、代码演示部分

import { onBeforeUnmount,onUnmounted,ref } from 'vue';

onBeforeUnmount(()=>{
  console.log("取消挂载之前");
})

onUnmounted(()=>{
  console.log("取消挂载完成");
})

2.4.2、结果

点击Home之后

3、父子组件的生命周期介绍

其实这个过程理解起来也是比较容易的，因为子组件是依托于父组件存在的，所以肯定要等到父组件的生命周期到挂载前，才开始子组件的生命周期，为什么父组件mounted在最后呢，因为子组件作为父组件的一部分，也可以说父组件是依赖子组件的，子组件都没有挂载，那么父组件能挂载成功吗？

简单了解vue3生命周期