Vue3的生命周期

简易列举vue3的生命周期函数

<script setup>
import { ref } from 'vue'
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';
console.log('setup');
onBeforeMount(() => {
  // 这个时候无法获取dom元素，可以获取自定义信息
  console.log('创建之前  ===> onBeforeMount');
})

  //这里可以获取dom元素了 
onMounted(() => {
  console.log('创建完成，===》 onMounted ===》已经可以操作dom元素了');
})

// 当值改变的时候就会触发这两个onBeforeUpdate、onUpdated生命周期钩子
onBeforeUpdate(() => {
  console.log('更新之前 ===》 onBeforeUpdate');
})

onUpdated(() => {
  console.log('更新完成，===》 onUpdated');
})

// 组件卸载之前，相当于以前的beforeDestroy
onBeforeUnmount(() => {
  console.log('卸载之前 ===》 onBeforeUnmount');
})

onUnmounted(() => {
  console.log('卸载完成 ===》onUnmounted');
})

</script>

<style lang="scss" scoped>

</style>