vue3生命周期

vue3生命周期

  onBeforeMount(()=>{
     console.log(document.getElementById('test'),'onBeforeMount','组件的根元素还不存在dom还未渲染')
  })
  onMounted(()=>{
    console.log(document.getElementById('test'),'onMounted','组件已被渲染，元素可用')
  })
  onBeforeUpdate(()=>{
   
    console.log('onBeforeUpdate','组件更新之前调用')
  })
  onUpdated(()=>{
     alert('组件更新')
    console.log('onupdated','组件更新成功调用')
  })
  onBeforeUnmount(()=>{
    console.log('onBeforeUnmount','组件卸载之前调用');
    alert('销毁组件')
  })
  onUnmounted(()=>{
    console.log('onUnmounted','组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载');
  })

2.x 生命周期	3.x 生命周期	执行时间说明
beforeCreate	setup	组件创建前执行
created	setup	组件创建后执行
beforeMount	onBeforeMount	组件挂载到节点上之前执行
mounted	onMounted	组件挂载完成后执行
beforeUpdate	onBeforeUpdate	组件更新之前执行
updated	onUpdated	组件更新完成之后执行
beforeDestroy	onBeforeUnmount	组件卸载之前执行
destroyed	onUnmounted	组件卸载完成后执行
errorCaptured	onErrorCaptured	当捕获一个来自子孙组件的异常时激活钩子函数