vue3組合API注意點(系列三)

2022-06-16 02:48:13 字數 1926 閱讀 9061

新的setup元件選項在建立元件之前執行。

1

.composition api 和option api(vue2.x)混合使用

2.composition api本質 (組合api/注入api) 3

.setup執行時機

4.setup注意點

1

.setup執行時機

beforecreate: 表示元件剛剛被建立出來, 元件的data和methods還沒有初始化好

setup

created : 表示元件剛剛被建立出來, 並且元件的data和methods已經初始化好 2

.setup注意點

-由於在執行setup函式的時候, 還沒有執行created生命週期方法

所以在setup函式中,是無法使用data和methods

-由於我們不能在setup函式中使用data和methods,

所以vue為了避免我們錯誤的使用, 它直接將setup函式中this修改成了undefined

- setup函式只能是同步的不能是非同步的

warning

由於在執行setup時尚未建立元件例項,因此在setup選項中沒有this。這意味著,除了props之外,你將無法訪問元件中宣告的任何屬性——本地狀態、計算屬性或方法。

​ 也就是說,datacomputed等自主定義的那些初始化資料都將會無法提供訪問。

setup()內部,this不會是該活躍例項的引用,因為setup()是在解析其它元件選項之前被呼叫的,所以setup()內部的this的行為與其它選項中的this完全不同。這在和其它選項式 api 一起使用setup()時可能會導致混淆。

簡單來說,就是在setup()中,this指向undefined

composition apioption api允許混用。option api就是過去那種 data,computed 的 vue2.x 函式定義方案。

混用示例如下。

}"c1

">button1}"

c2">button2

這是乙個 兩個api 相互之間沒有互動的示例,你也可以讓option api引用compostion api中的內容。

}"c1

">button1}"

c2">button2

這個示例我在methodsc1中使用了composition apimsg2,這樣你點按button1的時候,兩個數字都會發生變化。

記得,只有option api引用composition api的份,沒有反過來的份。

而且由於composition api立即執行並 return 的原因,它不被允許作為async非同步函式進行定義。

}

"myfn1

">按鈕}"

myfn2

">按鈕

vue3組合API(setup函式,系列二)

1,用vue2.x,實現乙個todos 從 中可以看到,vue2,資料和業務分離了,有新增功能,有刪除功能 直接點 li 標籤就刪除它 都是標準的方案,沒啥可說的。重點不是這個 todo list 應用,重點是,vue3 期望用 組合api 的方式來解決乙個應用中,資料和功能分離的問題。即方法和 d...

vue3 可復用 組合

1.乙個元件中宣告乙個變數,之前是在data裡面,現在可以寫在setup裡面 export default let timer onmounted 1000 onunmounted const data usercounter 這樣的話可以統一建立乙個js檔案用的時候直接引入進去,setup也看著比...

vue3中reactive注意點(系列四)

基本型別 數字 字串 布林值 在reactive中無法被建立成proxy物件,也就無法實現監聽。無法實現響應式 點選 button 我們期望的結果是數字從 0 變成 1,然而實際上介面上的數字並沒有發生任何改變。檢視控制台,它的輸出是這樣的 我點了 3 次 出現提示 value cannot be ...