生命周期

vue从创建到销毁的整个过程就是Vue的生命周期,我们要了解的是vue组件各生命周期会触发内置的钩子函数,我们可以在特定的钩子函数中执行特定的操作,如初始化数据，获取dom元素等等

生命周期的分类

vue的生命周期主要分为四大阶段,八个方法

阶段分为初始化,挂载,更新,卸载

钩子函数	执行时间说明
setup	组件创建前执行
setup	组件创建后执行
onBeforeMount	组件挂载到节点上之前执行
onMounted	组件挂载到节点上之后执行
onBeforeUpdate	组件更新之前执行
onUpdated	组件更新完成之后执行
onBeforeUnmount	组件卸载之前执行
onUnmounted	组件卸载完成后执行

每个生命周期函数都要先导入才可以使用

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`the component is now mounted.`)
})
</script>

我们本期课程所学习的vue知识，在标签里使用了setup关键字，这实际上是代表我们使用了组合式api的语法

在传统的选项式api写法中，setup被beforeCreate和created生命周期所替代，在setup函数中，组件实例就已经被创建完成了，那么滞后的这两个钩子也就没有必要再使用了，没有任何意义,这个大家了解一下就可以了

上面的钩子函数会在实例生命周期的不同阶段被调用，最常用的是 onMounted、onUpdated 和 onUnmounted。

setup

组件初始化完毕，可以访问所有实例数据，获取接口数据等

onMounted

DOM已经创建，可以访问数据和DOM元素；访问子组件等

onUpdated

当视图层完成更新时会调用，此时所有的状态都是最新的

onUnmounted

销毁组件实例，可以清理该组件与其他组件实例的连接，解绑它的全部指令以及事件监听器、定时器等

我们可以通过下面的示例了解一下生命周期的执行顺序

<template>
  <div id="test">
  </div>
</template>
<script setup lang="ts">
import { onBeforeMount, onMounted } from "vue";
const find_dom = document.getElementById('test');
console.log(find_dom, 1);
onBeforeMount(() => {
  const find_dom = document.getElementById('test');
  console.log(find_dom, 2);
});
onMounted(() => {
  const find_dom = document.getElementById('test');
  console.log(find_dom, 3);
});
console.log(find_dom, 4);
</script>