vue3.0生命周期函数

这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

咱们可以先看截图 vue2和vue3的钩子函数的有什么变化

其实变化还是挺大的就生命周期函数而言，之前公司本来想把vue2换成vue3，但是成本太高了，不是简单的直接升级就可以的，需要重构项目了，就没做了

vue2.0选项式api和vue3.0组合式api的使用的区别

vue2.0 我们可以把钩子函数写在传给函数的对象里 { mounted(){},beforemounted(){} }vue2可以自己识别,这个我们就不多赘述了，大家应该都用过

vue3我们要使用生命周期函数需要用吞引入的方式 (vue3里没有created和beforecreate他们被setup取代了)

import { ref, 
 defineComponent,
 onBeforeMount,
 onMounted,
 onUpdated,
 onBeforeUpdate,
 watchEffect} from 'vue'

把引入的这些钩子函数 写到setup里 如

    setup(props,ctx) {
      let count = ref(0) // 生命了一个可监听对象
      onBeforeMount(()=>{
        console.log('onBeforeMount')
      }) 
      onMounted(()=>{
        console.log("onMounted")
      }) 
      onUpdated(()=>{
        console.log("onUpdated")
      })
      onBeforeUpdate(()=>{
        console.log("onBeforeUpdate")
      })
      watchEffect(()=>{ // 
        console.log("watchEffect")
      },{
        flush: "pre" // pre：组件更新前执行
                      // sync：强制效果始终同步触发
                      // post：组件更新后执行
      })

      return {
        count
      }
  }

这里咱们只是简单走一下生命周期函数，顺便观察一下watchEffect钩子函数 watchEffect还可以传参数 大家可以看看区别

我们跑一下程序 看一下pre

在跑一下post

onBeforeUnmount,onUnmounted 就是组件的卸载前和卸载后

onErrorCaptured 主要是捕获一些错误信息主要是子孙组件的一些错误信息

 onErrorCaptured((e)=>{
        // 子孙组件有任何问题我们可以去获取到它的错误
       console.log(e)
      }) 
      

onRenderTriggered和onRenderTriggered这两个钩子函数主要是 调试用的 具体用法

      onRenderTriggered((e)=>{ // 这个函数是只要是当前render了他就可以追踪到
        console.log(e) // 相应的一些渲染信息
         debugger
      })
      onRenderTriggered((e)=>{ // 这个是重新渲染之后之后才会触发这个函数
        debugger
      }) 

也面状态如图

生命周期函数，就简单介绍完了