學習vue3系列生命週期

2021-10-08 22:41:02 字數 1740 閱讀 9591

之前已經介紹了 vue3 的相關知識點:ref,reactive,computed,watch,watcheffect,toref,torefs 這些響應式的api,相信大家對 vue3 已經有一定的理解了。

除了這些函式 vue3 還增加了些生命週期,可以直接匯入 on*** 一族的函式來註冊生命週期鉤子:與 2.x 版本生命週期相對應的組合式 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

import

from

'vue'

const mycomponent =

)onupdated((

)=>

)onunmounted((

)=>)}

,}

這些生命週期鉤子註冊函式只能在 setup() 期間同步使用, 因為它們依賴於內部的全域性狀態來定位當前元件例項(正在呼叫 setup() 的元件例項), 不在當前元件下呼叫這些函式會丟擲乙個錯誤。

生命週期的用法和 vue2 無太大的區別,只是使用的時候記得把 api 匯入進來。

vue 組合式 api對依賴注入提供了 provide 和 inject 函式,功能類似 vue2 options api 的 provide/inject。provide 和 inject 函式都只能在當前活動元件例項的 setup() 中呼叫。

在上游元件提供 provide :

setup()

在下游元件使用 :

hello <

/div>

<

/template>

import

from

'vue'

export

default

}<

/script>vue3 還有一些其它api,這個工具函式如下:

1、readonly 把物件變成唯讀的。

2、isref 檢查乙個值是否為乙個 ref 物件。

3、isproxy 檢查乙個物件是否是由 reactive 或者 readonly 方法建立的**。

4、isreactive檢查乙個物件是否是由 reactive 建立的響應式**。

5、isreadonly檢查乙個物件是否是由 readonly 建立的唯讀**。

6、unref如果引數是乙個 ref 則返回它的 value,否則返回引數本身

當我們在元件間提取並復用邏輯時,組合式 api 是十分靈活的。乙個組合函式僅依賴它的引數和 vue 全域性匯出的 api,而不是依賴其微妙的 this 上下文。你可以將元件內的任何一段邏輯匯出為函式以復用它。你甚至可以通過匯出整個 setup 函式達到和 extends 等價的效果。

vue3之生命週期函式

在vue3 composition api中 附帶了乙個 setup 方法。此方法封裝了我們的大多數元件 並處理了響應式,生命週期鉤子函式等。composition api使我們能夠更好地將 組織為更多的模組化功能,而不是根據屬性的型別 方法,計算的資料 進行分離。vue3的生命週期函式跟vue2....

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

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

Vue 3 生命週期鉤子函式

可以直接匯入on 一族的函式來註冊生命週期鉤子 import from vue const mycomponent onupdated onunmounted 這些生命週期鉤子註冊函式只能在setup 期間同步使用,因為它們依賴於內部的全域性狀態來定位當前元件例項 正在呼叫 setup 的元件例項 ...