版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認(rèn)領(lǐng)
文檔簡介
第九章組合式APIContents9.1組合式API的動機與優(yōu)勢組合式API核心概念9.29.3組合式API與混入比較本章小結(jié)9.4組合式API的動機與優(yōu)勢9.1動機9.1.1
動機
3.更好的類型推斷CompositionAPI支持更好的TypeScript類型推斷。
2.更好的重用CompositionAPI提供了更靈活的函數(shù)式編程方式,使得組件邏輯可以更容易地抽象和復(fù)用。在Vue2中是使用選項式API(OptionsAPI)來編寫組件邏輯,開發(fā)者需要在不同的選項中分散定義數(shù)據(jù)、計算屬性、方法、生命周期鉤子等。隨著應(yīng)用規(guī)模的增長,組件邏輯變得越來越復(fù)雜,導(dǎo)致代碼難以維護和理解。為了解決這個問題,Vue3中引入了組合式API。1.更好的組織組合式API允許將相關(guān)邏輯組織在一起,而不是按照選項的方式分散定義。為了更好地理解組合式API的動機,請參照教材的兩種實現(xiàn)代碼的對比優(yōu)勢9.1.2
優(yōu)勢3.更好的TypeScript支持組合式API對TypeScript提供了更好的支持。2.更靈活的邏輯復(fù)用組合式API提供了更靈活的邏輯復(fù)用方式。開發(fā)者可以根據(jù)需求將相關(guān)邏輯封裝為自定義的函數(shù),然后在不同的組件中進行復(fù)用。1.組織和重用邏輯組合式API通過將相關(guān)邏輯組織在一起,提供了更好的代碼組織結(jié)構(gòu)。4.更好的代碼組織與可讀性組合式API使得代碼的組織更加直觀和一致。
參照教材中代碼對比示例體會使用組合式API所帶來的優(yōu)勢。
組合式API核心概念
Setup函數(shù)
reactiveAPI
refAPI
9.2Setup函數(shù)9.2.1
2.返回值setup函數(shù)可以返回一個對象或一個渲染函數(shù)。1.接受的參數(shù)(1)Props組件的屬性對象,它包含了從父組件傳遞給子組件的屬性值。(2)Context組件的上下文對象,它包含了一些有用的屬性和方法,如attrs、slots、emit等。Vue3中引入一個新的特性setup函數(shù)是在組件創(chuàng)建過程中調(diào)用的一個函數(shù),用于設(shè)置組件的狀態(tài)、行為和生命周期鉤子函數(shù),取代了Vue2中選項式API的data、computed、methods等方法。setup函數(shù)是一個標(biāo)準(zhǔn)的JavaScript函數(shù),它接收兩個參數(shù)props和context,及一個返回值。Setup函數(shù)Setup語法糖reactiveAPI9.2.212
使用方式
使用reactiveAPI,首先從vue模塊導(dǎo)入reactive函數(shù)。
import{reactive}from'vue';
然后,使用reactive函數(shù)來創(chuàng)建一個響應(yīng)式的對象。
conststate=reactive({ count:0,
message:'HelloVue3!',});此時,state對象就成為一個響應(yīng)式對象,可以在Vue組件中使用。當(dāng)state對象的屬性發(fā)生變化時,Vue會自動重新渲染相關(guān)的組件。reactiveAPI還提供了其他輔助函數(shù),用于處理響應(yīng)式對象。(1)toRefs將響應(yīng)式對象轉(zhuǎn)換為普通的引用對象。這對于將響應(yīng)式對象作為props傳遞給子組件時非常有用。(2)isRef檢查一個值是否是一個引用對象。(3)isReactive檢查一個對象是否是一個響應(yīng)式對象。(4)isReadonly檢查一個對象是否是一個只讀對象。(5)readonly創(chuàng)建一個只讀的響應(yīng)式對象。
2.使用場景(3)全局狀態(tài)管理。reactiveAPI可以用于創(chuàng)建全局的狀態(tài)管理。(2)表單處理。在表單中使用reactiveAPI可以輕松地跟蹤表單字段的值和狀態(tài)。(1)組件狀態(tài)管理。reactiveAPI可以用于管理組件的狀態(tài)。(4)數(shù)據(jù)驅(qū)動的動態(tài)UI。reactiveAPI使構(gòu)建數(shù)據(jù)驅(qū)動的動態(tài)UI更加容易。(5)插件和擴展開發(fā)。reactiveAPI還為開發(fā)插件和擴展提供了強大的基礎(chǔ)。refAPI9.2.3
返回值:ref函數(shù)返回一個響應(yīng)式的引用對象。引用對象的屬性:value:引用對象的value屬性包含了實際的值??梢酝ㄟ^讀取或修改value屬性來訪問和更新值。1.使用方式首先導(dǎo)入ref函數(shù)。import{ref}from'vue'constmyRef=ref(initialValue)refAPI也是用于創(chuàng)建可變的、被包裝的響應(yīng)式對象。ref對象的主要優(yōu)勢在于可以通過修改value屬性來更改其內(nèi)部值,而這種更改會被視為響應(yīng)式的,從而觸發(fā)相關(guān)的視圖更新。refAPI
(2)reactive函數(shù)的使用場景適用于復(fù)雜對象的響應(yīng)式數(shù)據(jù)。reactive函數(shù)主要用于創(chuàng)建復(fù)雜對象的響應(yīng)式數(shù)據(jù),如對象、數(shù)組等。它會返回一個包裝了傳入對象的響應(yīng)式代理對象。在模板和JS代碼中使用。reactive函數(shù)創(chuàng)建的響應(yīng)式數(shù)據(jù)在模板和JavaScript代碼中都可以直接使用,不需要通過特定的屬性訪問。2.與reactive使用場景的區(qū)別(1)ref函數(shù)的使用場景
適用于基本類型的響應(yīng)式數(shù)據(jù)。ref函數(shù)主要用于創(chuàng)建基本類型的響應(yīng)式數(shù)據(jù),如數(shù)字、字符串、布爾值等。它會返回一個包裝了初始值的響應(yīng)式引用對象。
17區(qū)別總結(jié):ref函數(shù)適用于簡單的基本類型數(shù)據(jù),需要通過.value訪問數(shù)據(jù)。在模板中使用時無需.value。reactive函數(shù)適用于復(fù)雜的對象類型數(shù)據(jù),可以直接訪問數(shù)據(jù),適合在模板和JavaScript代碼中使用。通常情況下,當(dāng)需要創(chuàng)建單個的簡單數(shù)據(jù),如一個計數(shù)器變量時,可以使用ref函數(shù)。而當(dāng)需要創(chuàng)建一個包含多個屬性或需要進行深層次的嵌套觀察的對象時,則可以使用reactive函數(shù)。需要注意的是,盡管reactive函數(shù)在很多情況下更為靈活,但在性能方面可能會稍微遜色于ref函數(shù)。因此,在選擇使用ref還是reactive時,可以根據(jù)具體的需求和場景來決定。組合式API與混入比較9.3兩者區(qū)別9.3.1組合式API與混入都是Vue中用于組合和復(fù)用代碼的特性,但它們在實現(xiàn)方式和使用方式上有一些區(qū)別。1.實現(xiàn)方式(1)組合式API是Vue3中的一種新的API。它允許將組件的邏輯拆分成更小的可重用函數(shù),這些函數(shù)可以通過setup方法來定義。(2)混入是Vue2中的特性,通過將一組選項對象混入組件來實現(xiàn)代碼的復(fù)用。2.使用方式(1)組合式API允許以函數(shù)的形式組織代碼,可以根據(jù)功能將相關(guān)邏輯組合在一起。(2)混入通過在組件中使用混入選項來引入??梢酝瑫r引入多個混入,并被合并到組件選項中。213.依賴解決(1)組合式API使用了更先進的響應(yīng)式系統(tǒng),可以更好地處理組件間的依賴關(guān)系。(2)混入的依賴解決是通過簡單的選項合并實現(xiàn)的。如果多個混入之間有相同的選項,后面的混入的選項會覆蓋前面的選項。綜上所述,組合式API更加靈活和強大,可以更好地組織和復(fù)用組件的代碼,而混入則是一種簡單的代碼復(fù)用機制。因此,Vue3開發(fā)中建議優(yōu)先考慮使用組合式API。代碼示例9.3.2本章小結(jié)9.4通過本章的學(xué)習(xí)可以知道組合式API是一種靈活、可組合的編寫Vue組件的方式。它通過引入setup函數(shù)和一系列核心函數(shù)(如reactive、ref、computed和watch)來改變組件的編寫方式,為Vue開發(fā)提供了許多優(yōu)勢。首先,組合式API使代碼邏輯更直觀。通過將相關(guān)邏輯封裝到setup函數(shù)中,開發(fā)者可以按照功能組織代碼,而不是按照生命周期鉤子函數(shù)的順序。這使代碼更易于理解和維護。其次,組合式API促進了代碼的重用。開發(fā)者能夠?qū)⒖蓮?fù)用的邏輯封裝到函數(shù)中,并在不同的組件中進行重用。這提高了代碼的可維護性和可擴展性,減少了重復(fù)編寫代碼的工作量。第三,組合式API提供了更好的類型推導(dǎo)和IDE支持。它使用了嚴(yán)格的靜態(tài)類型推導(dǎo),使IDE能夠更好地理解代碼并提供準(zhǔn)確的代碼補全和錯誤檢查。這提高了開發(fā)效率并減少了潛在的錯誤。此外,組合式API還有助于更好地組織和測試代碼。開發(fā)人員可以更容易地進行單元測試,同時也可以更容易地對邏輯進行拆分和組合。這提高了代碼的可測試性和可組織性。與傳統(tǒng)的混入相比,組合式API具有明顯的區(qū)別。組合式API使用setup函數(shù)和函數(shù)式的方式來組織代碼,而混入通過將共享
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024高中語文第1單元論語蚜第4課己所不欲勿施于人練習(xí)含解析新人教版選修先秦諸子蚜
- 2024高中語文綜合評估含解析新人教版必修5
- 2024高考?xì)v史一輪復(fù)習(xí)方案專題十八20世紀(jì)的戰(zhàn)爭與和平第39講第一次世界大戰(zhàn)及凡爾賽-華盛頓體系下的世界教學(xué)案+練習(xí)人民版
- 2024年淮南職業(yè)技術(shù)學(xué)院高職單招職業(yè)技能測驗歷年參考題庫(頻考版)含答案解析
- 2024年海南經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院高職單招職業(yè)技能測驗歷年參考題庫(頻考版)含答案解析
- 2024年浙江郵電職業(yè)技術(shù)學(xué)院高職單招職業(yè)適應(yīng)性測試歷年參考題庫含答案解析
- 2024年陜西中醫(yī)骨傷研究院高層次衛(wèi)技人才招聘筆試歷年參考題庫頻考點附帶答案
- 2024年河南經(jīng)貿(mào)職業(yè)學(xué)院高職單招職業(yè)技能測驗歷年參考題庫(頻考版)含答案解析
- 2024年閩清縣皮膚病防治院高層次衛(wèi)技人才招聘筆試歷年參考題庫頻考點附帶答案
- 2024年江西司法警官職業(yè)學(xué)院高職單招語文歷年參考題庫含答案解析
- 2024全新農(nóng)民普通話培訓(xùn)
- 2024五年級上學(xué)期家長會ppt完整版
- 廣東省廣州市名校2024屆中考聯(lián)考物理試卷含解析
- 信息化風(fēng)險評估報告
- 2024年殯葬服務(wù)項目管理培訓(xùn)課件
- 青島版四年級上冊數(shù)學(xué)寒假35天作業(yè)
- 建筑工地春節(jié)安全生產(chǎn)培訓(xùn) 安全施工平安過節(jié)
- 談戀愛被騙民事起訴狀范本
- DB11T 945.1-2023建設(shè)工程施工現(xiàn)場安全防護、場容衛(wèi)生及消防保衛(wèi)標(biāo)準(zhǔn) 第1部分:通則
- 無犯罪證明申請表
- 2021年校長休業(yè)式講話稿
評論
0/150
提交評論