Vue3——生命周期

生命周期

分为四个阶段：创建、挂载、更新、销毁（卸载）

Vue2:

　　创建阶段：beforeCreate、created

　　挂载阶段：beforeMount、mounted

　　更新阶段：beforeUpdate、updated

　　销毁阶段：beforeDestroy、destroyed

vue3：

　　创建阶段：setup

　　挂载阶段：onBeforeMount、onMounted

　　更新阶段：onBeforeUpdate、onUpdated

　　卸载阶段：onBeforeUnmount、onUnmounted

　　常用的钩子：onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmounted(卸载之前)

<script lang="ts" setup name="Person">
  import {onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue';
  // 生命周期
  // 创建 setup中没有创建前和创建完成钩子函数，直接就是创建完成
  console.log('创建');
  // 挂载前
  onBeforeMount(() => {
    console.log('挂载前');
  })
  // 挂载完成
  onMounted(() => {
    console.log('挂载完成');
  })
  // 更新前
  onBeforeUpdate(() => {
    console.log('更新前');
  })
  // 更新完成
  onUpdated(() => {
    console.log('更新完成');
  })
  // 卸载前
  onBeforeUnmount(() => {
    console.log('卸载前');
  })
  // 卸载完成
  onUnmounted(() => {
    console.log('卸载完成');
  })
</script>

挂载顺序：

父子组件的生命周期，挂载顺序是先子后父，即父--挂载前、子--挂载前、子--挂载完成、父--挂载完成（App.vue先于所有组件执行挂载前，后于所有组件执行挂载完成）