vue3生命周期解讀

僅僅為了方便學(xué)習(xí)記錄信息,未有其他用途。(采摘)

與 2.x 版本生命周期相對(duì)應(yīng)的組合式 API
  1. beforeCreate -> 使用 setup()
  2. created -> 使用 setup()
  3. beforeMount -> onBeforeMount
  4. mounted -> onMounted
  5. beforeUpdate -> onBeforeUpdate
  6. updated -> onUpdated
  7. beforeDestroy -> onBeforeUnmount
  8. destroyed -> onUnmounted
  9. errorCaptured -> onErrorCaptured
  • 新增:調(diào)試鉤子函數(shù):
  • onRenderTracked
  • onRenderTriggered
export default {
  //v2
  beforeCreate () {
    console.log('beforeCreate()')
  },
  created () {
    console.log('created')
  },
  beforeMount () {
    console.log('beforeMount')
  },
  mounted () {
    console.log('mounted')
  },
  //v3
  setup() {
    onBeforeMount(() => {
      console.log('--onBeforeMount')
    })
    onMounted(() => {
      console.log('--onMounted')
    })
    onRenderTriggered(e) {
      debugger
    // 檢查哪個(gè)依賴性導(dǎo)致組件重新渲染
  },
    return {}
  }
}

Composition API(手寫)<===========================>配置vue.config

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
禁止轉(zhuǎn)載,如需轉(zhuǎn)載請(qǐng)通過簡(jiǎn)信或評(píng)論聯(lián)系作者。

相關(guān)閱讀更多精彩內(nèi)容

  • 本篇針對(duì)vue3的新增特性進(jìn)行學(xué)習(xí)主要來自http://www.liulongbin.top:8085/#/[ht...
    哎呀_js閱讀 14,357評(píng)論 1 6
  • 本章介紹到的是Vue3.x的生命周期 從Vue2.x到Vue3.x beforeCreate????>??移除(s...
    Mr_莫言之閱讀 1,713評(píng)論 0 1
  • vue3 的鉤子函數(shù)基本是再 vue2 的基礎(chǔ)上加了一個(gè)on,但也有兩個(gè)鉤子函數(shù)發(fā)生了變化。BeforeDestr...
    栗子daisy閱讀 1,965評(píng)論 0 0
  • Vue2.x 你不能使用箭頭函數(shù)來定義一個(gè)生命周期方法!!因?yàn)閠his啥也找不到還報(bào)錯(cuò)! beforeCreate...
    _小海綿閱讀 3,680評(píng)論 0 0
  • Vue3官網(wǎng)文檔[https://vue3js.cn/docs/zh/guide/introduction.htm...
    一蘇沨來閱讀 3,668評(píng)論 0 7

友情鏈接更多精彩內(nèi)容