Vue 3 生命週期鉤子函式

可以直接匯入on***一族的函式來註冊生命週期鉤子：

import

from
'vue'
const mycomponent =
)onupdated((
)=>
)onunmounted((
)=>)}
,}

元件例項上下文也是在生命週期鉤子同步執行期間設定的，因此，在解除安裝元件時，在生命週期鉤子內部同步建立的偵聽器和計算狀態也將自動刪除。

1、與 2.x 版本生命週期相對應的組合式 api

beforecreate -> 使用 setup()
created -> 使用 setup()
beforemount -> onbeforemount
mounted -> onmounted
beforeupdate -> onbeforeupdate
updated -> onupdated
beforedestroy -> onbeforeunmount
destroyed -> onunmounted
errorcaptured -> onerrorcaptured
2、新增的鉤子函式
除了和 2.x 生命週期等效項之外，組合式 api 還提供了以下除錯鉤子函式：
onrendertracked
onrendertriggered
兩個鉤子函式都接收乙個 debuggerevent，與 watcheffect 引數選項中的 ontrack 和 ontrigger 類似：

export

default
,}

import

from
'vue'
const themesymbol =
symbol()
const ancestor =,}
const descendent =},
}

vue3的生命週期鉤子與vue2生命週期對比理解

對於vue的生命週期想必大家都非熟悉,在專案中非常常用 生命週期 伴隨著生命週期，給使用者使用的函式，操控生命週期，主要是操控鉤子函式。vue2 vue3 beforecreate setup created setup beforemount onbeforemount mounted onmou...

vue生命週期，鉤子函式

一 vue生命週期簡介 咱們從上圖可以很明顯的看出現在vue2.0都包括了哪些生命週期的函式了，總結一下，對官方文件的那張圖簡化一下，就得到了這張圖。二 生命週期 對於執行順序和什麼時候執行，看上面圖基本有個了解了。下面我們將結合 去看看鉤子函式的執行。鉤子函式 1.create 和 mounted...

vue 生命週期（鉤子函式）

new vue 例項物件，下一步進入beforcreate 狀態 當使用new vue 建立物件之前，執行的事件 這裡可以做載入動畫 下一步，進入created 然後，他會檢測是否有el屬性，如果有在檢測template屬性型別，是一段渲染的函式還是一段html 然後就進入了beforemount狀...