Vue3的生命周期

最基本的几个阶段：

创建阶段：setup

挂载阶段：onBeforeMount, onMounted

更新阶段：onBeforeUpdate, onUpdated

卸载阶段：onBeforeUnmount, onUnmounted

实例：

App.vue

<template>
  <!-- 设定Person组件是否显示 -->
  <Person v-if="isShow" /> 
</template>
  
<script lang="ts" setup name="App">
  import Person from './components/Person.vue';
  import {ref, onMounted} from 'vue'
  let isShow = ref(true)

  onMounted(()=>{
    console.log("'App.vue' mounted")
  })
  
</script>

<style scoped>
/* 可以添加一些样式 */
</style>

Person.vue

<template>
    <div class="person">
      {{ sum }}
      <!-- 点击按钮后会执行onBeforeUpdate和onUpdated -->
      <button @click="add">+1</button>
    </div>
</template>

<script lang="ts" setup name = "Person">
  import {ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue'


  // data
  let sum = ref(0)

  // function
  function add() {
    sum.value += 1
  }

  // create
  console.log('create')

  // before mount
  onBeforeMount(()=>{console.log('before mount')})

  // mounted
  onMounted(()=>{console.log('mounted')})

  // before update
  onBeforeUpdate(()=>{console.log('before update')})

  // updated
  onUpdated(()=>{console.log('updated')})

  // before unmount
  onBeforeUnmount(()=>{console.log('before unmounted')})

  // unmounted
  onUnmounted(()=>{console.log('umounted')})
</script>

<style scoped>
  /* 可以添加样式 */
</style>

展示： 

默认状态下：

前三个是Person.vue的输出，先执行了Pers.vue，最后才是App.vue的挂载内容。

即App永远是最后挂载的

原因：

Vue3项目的执行顺序是：

index.html => main.ts =>App.vue

而在App.vue中，先解析  <Person v-if="isShow" /> ，即运行Person.vue的代码。 

最后等App.vue中template的内容全部解析完了，才执行了它script的

 onMounted(()=>{
    console.log("'App.vue' mounted")
  })

点击按钮后：

更改App.vue中isShow的布尔值true为false后：