Vue3-笔记七(生命周期)（vue生命周期实现原理）

这里只说setup语法糖中的声明周期

生命周期是一个函数，在特定的时间段执行里面的回调

***setup函数执行在声明周期前***执行顺序0
onBeforeMount	挂载前	执行顺序1
onMounted	挂载	执行顺序2
onBeforeUpdate	修改前	执行顺序3
onUpdated	修改	执行顺序4
onBeforeUnmount	卸载前	执行顺序5
onUnmounted	卸载	执行顺序6

***父组件***
<script setup>
console.log('setup')
onBeforeMount(()=>{
  console.log('before mount')
})
onMounted(()=>{
  console.log('mounted')
})
</script>

***子组件***
<script setup>
console.log('setup2')
onBeforeMount(()=>{
  console.log('before mount2')
})
onMounted(()=>{
  console.log('mounted2')
})
</script>

执行结果:

setup
before mount
setup2
before mount2
mounted2
mounted