vue生命周期函数详解

熊黎龙2022年6月5日小于 1 分钟约 171 字

<script setup>
import { 
  onBeforeMount, 
  onMounted, 
  onBeforeUpdate, 
  onUpdated,
  onBeforeUnmount,  
  onUnmounted  
} from 'vue'

// 1. setup本身就是处在create生命周期函数阶段，就是创建组件实例的阶段

onBeforeMount(()=>{
  console.log('2. 模板已经编译成函数，准备渲染挂载')
})

onMounted(()=>{
  console.log('3. 模板已经渲染挂载到页面')
})

onBeforeUpdate(()=>{
  console.log('4. 响应式数据变化后，页面准备更新渲染前')
})

onUpdated(()=>{
  console.log('5. 页面已更新渲染完毕')
})

onBeforeMount(()=>{
  console.log('6. 准备卸载组件前')
})

onUnmounted(()=>{
  console.log('7. dom完全销毁，组件卸载完毕后')
})
</script>

组合式API中，没有beforeCreate和created，因为setup本身就是