Vue.js 3前端開發(fā)基礎及項目化應用 教案 單元6 組合式API-教學設計

《Vue.js前端開發(fā)基礎及項目化應用》教學設計課程名稱：Vue.js前端開發(fā)基礎及項目化應用授課年級：授課學期：學年第一學期教師姓名：2023年09月09日課題名稱單元6組合式API計劃學時6學時內容分析Vue中提供了兩種編寫組件的方式：選項式API和組合式API。前者主要用于Vue2及以前的版本，后者則是Vue3中新引入的特性之一，它注重對同一功能的邏輯關注點相關代碼的匯集，適用于大型項目中復雜組件的開發(fā)，具有代碼可復用性高和可維護性強的特點。本單元將介紹兩者的差異，并重點介紹組合式API編寫組件的方法，以及相關的知識點，包括setup函數、響應性API的原理和provide/inject。通過使用兩種方式實現“查詢歷史名城相關詩詞”任務，使得學習者更好地理解組合式API的特點，掌握其使用方法。教學目標及基本要求1.了解組合式API特點2.理解響應性原理3.掌握setup函數應用方法4.掌握響應性API的使用5.能夠利用provide/inject實現組件間傳值教學重點1.理解響應性原理2.掌握setup函數應用方法3.掌握響應性API的使用教學難點理解響應性原理教學方式教學采用教師使用PPT講解和案例示范相結合的方式教學過程第一課時（組合式API特點，組合式API用法，setup函數及其用法）一、創(chuàng)設情境，引入組合式API概念1.教師通過應用場景描述，引出組合式API的必要性。在前面單元中，Vue組件的編寫是按照選項來歸置代碼塊的，這種方式被稱為選項式API（OptionsAPI），它具有易學易用的特點，但代碼本身的邏輯關聯性卻沒有得到很好的體現。Vue3引入了新的編寫方式——組合式API（CompositionAPI），在程序結構上，它能夠對同一功能的邏輯關注點進行聚合，便于復雜組件中各功能邏輯的組織。2.明確學習目標。了解組合式API的特點了解setup函數的結構和參數掌握組合式API編寫組件的方法二、進行重點知識的講解1.教師根據課件，通過對比選項式API和組合式API，結合實現代碼來講解兩者的特點。2.教師根據課件，講解組合式API中setup函數的結構、參數props和參數context的用法。（1）教師根據課件，介紹setup函數的結構。（2）教師根據課件，介紹參數props的作用和使用方法，并使用代碼進行演示。props本身是子組件中的選項，其所定義的屬性用于接收父組件傳遞過來的數據，props以setup函數的參數形式將這些數據提供給setup函數使用。（3）教師根據課件，參數context的作用和使用方法，并使用代碼進行演示。context是一個普通的JavaScript對象，可為setup函數提供其他可能有用的值。3.教師根據課件，講解setup函數中訪問生命周期函數的具體方法，并使用代碼進行演示。（1）訪問方法在setup函數中訪問組件生命周期鉤子函數的方法是在每個鉤子函數名之前加上“on”，并將函數名首字母改為大寫。（2）使用案例講解訪問生命周期鉤子函數的具體應用三、歸納總結，布置課后作業(yè)1.回顧上課前的學習目標，對本節(jié)課知識點進行總結。教師帶領學生總結本節(jié)課需要熟悉的知識點，包括選項式API和組合式API的特點，組合式API編寫組件的方法，setup函數結構和參數，以及setup函數訪問生命周期函數。2.布置隨堂練習，檢查學生掌握情況。根據在線課程資源，給學生布置隨堂練習，檢測學生的掌握程度，并對學生出現的問題進行解決。3.使用在線學習平臺下發(fā)課后作業(yè)。第二課時（響應性原理，響應性API中reactive/ref，toRef/toRefs）一、回顧上節(jié)課內容，繼續(xù)講解本課時的知識1.教師對學生們的疑問進行統(tǒng)一答疑。2.回顧上個課時所學習的內容，繼續(xù)介紹本課時的內容。上節(jié)課主要為大家介紹了組合式API編寫組件的方法、setup函數的結構和參數，接下來，本節(jié)課將通過實例介紹響應性原理、響應性API的reactive、ref、toRef、toRefs的具體用法。3.明確學習目標。了解響應性原理掌握響應性API的reactive、ref、toRef、toRefs用法二、進行重點知識的講解1.教師根據課件，介紹響應性原理相關概念，以及響應式數據實現的流程，并使用代碼進行演示。（1）教師根據課件，講解副作用函數概念。它是會引起副作用的函數，它的執(zhí)行會直接或間接影響該函數作用域之外的部分。（2）教師根據課件，講解Proxy概念。Proxy被稱為代理，它包裝了另一個對象，即在該對象和外界之間設置攔截，以便對外界的訪問進行過濾和修改。（3）教師根據課件，講解響應式數據的實現流程，并使用代碼進行演示。2.教師根據課件，介紹部分常用的響應性API的應用，包括reactive、ref、toRef和toRefs，并使用代碼進行演示。（1）教師根據課件，介紹reactive用法，并使用代碼進行演示。reactive根據傳入的對象，返回一個深度響應式對象。（2）教師根據課件，介紹ref用法，并使用代碼進行演示。ref只接收一個基本類型數據，并返回一個響應式且可變的ref對象。（3）教師根據課件，介紹toRef用法，并使用代碼進行演示。toRef可以將響應式對象中的屬性也轉換為響應式的，但一次只能轉換一個屬性。（4）教師根據課件，介紹toRefs用法，并使用代碼進行演示。toRefs可以將響應式對象中的屬性也轉換為響應式的，且可以一次性轉換所有屬性。三、歸納總結，布置課后作業(yè)1.回顧上課前的學習目標，對本節(jié)課知識點進行總結。教師帶領學生總結本節(jié)課需要了解的響應性原理及相關概念，響應性API中reactive、ref、toRef和toRefs的用法。2.布置隨堂練習，檢查學生掌握情況。根據在線課程資源，給學生布置隨堂練習，檢測學生的掌握程度，并對學生出現的問題進行解決。3.使用在線學習平臺下發(fā)課后作業(yè)。第三課時（響應性API中的computed和watch）一、回顧上節(jié)課內容，繼續(xù)講解本課時的知識1.教師對學生們的疑問進行統(tǒng)一答疑。2.回顧上個課時所學習的內容，繼續(xù)介紹本課時的內容。上節(jié)課主要為大家介紹了響應性原理、響應性API的reactive、ref、toRef、toRefs的具體用法，接下來，本節(jié)課將介紹其它常用的響應性API，包括computed、watch，另外，介紹provide與inject組合實現跨層數據傳遞。3.明確學習目標。掌握computed和watch的用法掌握provide與inject的用法二、進行重點知識的講解1.教師根據課件，講解響應性API中的computed和watch的使用方法，并使用代碼進行演示。（1）教師根據課件，講解computed的用法，并使用代碼進行演示。computed在setup函數中的作用仍然是緩存數據，但使用方法有些不同。computed僅接收一個回調函數作為參數，返回一個ref對象。（2）教師根據課件，講解watch的用法，并使用代碼進行演示。數據監(jiān)聽器watch用于偵聽指定的數據源，并在回調函數中調用副作用函數。其用法與選項式API中的有些不同。2.教師根據課件，講解provide和inject的用法，并使用代碼進行演示。Vue3中provide和inject結合使用，可以方便地實現跨層傳遞數據的功能。三、歸納總結，布置課后作業(yè)1.回顧上課前的學習目標，對本節(jié)課知識點進行總結。教師帶領學生總結本節(jié)課需要熟悉的知識點，包括在setup函數中，使用computed描述響應式數據的復雜邏輯處理，使用watch監(jiān)聽數據并改變其他數據，利用provide和inject實現跨層數據傳遞的方法。2.布置隨堂練習，檢查學生掌握情況。根據在線課程資源，給學生布置隨堂練習，檢測學生的掌握程度，并對學生出現的問題進行解決。3.使用在線學習平臺下發(fā)課后作業(yè)。第四課時（響應性API在項目中的實際應用）一、回顧上節(jié)課內容，繼續(xù)講解本課時的知識1.教師對學生們的疑問進行統(tǒng)一答疑。2.回顧上個課時所學習的內容，繼續(xù)介紹本課時的內容。上節(jié)課主要為大家介紹了其它常用的響應性API，包括computed、watch，另外，介紹provide與inject組合用法。接下來，本節(jié)課將通過實際應用項目，分別使用選項式API與組合式API，幫助學習者進一步理解兩種編寫組件方法的差異性，并能夠掌握組合式API的用法。3.明確學習目標。掌握組合式API編寫組件的方法理解選項式API和組合式API差異性二、進行重點知識的講解1.教師根據課件，介紹項目6——會員中心頁面的需求描述、實現思路和代碼實現。（1）需求描述會員中心頁面包括左側導航欄和右側內容，通過導航欄切換到“我的賬戶”和“我的游記”，并帶有過渡效果；“我的賬戶”中可以動態(tài)增加或刪除“郵箱”字段，同樣也要求使用過渡效果（2）實現思路采用局部組件，構建會員中心頁面的“我的賬戶”和“我的游記”兩個部分由于“我的賬戶”和“我的游記”組件切換時，同一時間只需渲染其中一個，符合Transition組件應用條件，而“我的賬戶”表單中“郵箱”字段增加/刪除所形成的列表，則需要TransitionGroup組件才能實現過渡效果（3）功能實現任務6-1采用選項式API實現任務6-2利用組合式API重構三、歸納總結，布置課后作業(yè)1.回顧上課前的學習目標，對本節(jié)課知識點進行總結。教師帶領學生總結本節(jié)課需要熟悉的知識點，包括選項式API編寫組件的過程，組合式API編寫組件的過程，兩種方式的差異性。2.布置隨堂練習，檢查學生掌握情況。根據在線課程資源，給學生布置隨堂練習，檢測學生的掌握程度，并對學生出現的問題進