Vue3——生命周期

生命周期

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

Vue2:

　　创建阶段：beforeCreate、created

　　挂载阶段：beforeMount、mounted

　　更新阶段：beforeUpdate、updated

　　销毁阶段：beforeDestroy、destroyed

vue3：

　　创建阶段：setup

　　挂载阶段：onBeforeMount、onMounted

　　更新阶段：onBeforeUpdate、onUpdated

　　卸载阶段：onBeforeUnmount、onUnmounted

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<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先于所有组件执行挂载前，后于所有组件执行挂载完成）