Vue 3基礎入門 課件全套 王寧 第1-12章 Web前端發展與Vue3簡介-Vue3項目發布

第1章

Web前端發發展與Vue3簡介1.1Web前端發展歷史1990年Web系統誕生1995年JavaScript誕生1993-1994瀏覽器革命與標準化蒂姆·伯納斯-李在NeXT計算機上部署首個完整Web系統,確立瀏覽器/服務器(B/S)架構基礎模型,標志著前端工程的起點Mosaic圖形瀏覽器推動萬維網成為主流互聯網協議,NetscapeNavigator借多線程加載占領75%市場份額,W3C聯盟成立,開啟Web技術標準化進程網景與Sun聯合發布JavaScript,集成至Navigator2.0,作為"膠水語言"打通頁面組件間通信壁壘,支持非專業開發者通過腳本實現基礎交互1.1.1Web前端誕生與發展1.1.2

動態網頁技術一SSR與服務端渲染三大技術陣營SSR技術原理服務器執行模板中的動態指令,將變量替換為實際數據后輸出完整HTML至瀏覽器開源社區主導,跨平臺部署與開發敏捷性見長PHP網頁內容更新依賴整頁重載Java企業生態,側重安全性與擴展性JSP形成"后端構建頁面,前端負責展示"的協作范式網頁模板+動態數據→服務器微軟體系深度集成ASP瀏覽器SSR首次實現數據庫驅動內容的實時更新,推動電商與社交網絡爆發前后端耦合的三大核心問題溝通成本高昂開發效率低下調試復雜度劇增前端制作靜態HTML模板后需移交后端嵌入PHP/JSP等動態腳本界面微調需前后端同步修改代碼頁面問題需跨職能協同定位根源前端無法獨立完成頁面調整前端無法單獨排查渲染邏輯異常模板移交需反復確認數據綁定接口跨團隊聯調耗時,協作效率受限任何UI變更都依賴后端配合發布問題復現與定位鏈路長1.1.2

動態網頁技術1.1.3

前端框架演進與技術范式迭代Ajax(2005年)jQuery(2006年)基于XMLHttpRequest實現異步數據請求,瀏覽器無刷新更新核心影響一:催生富客戶端應用(RIA),Gmail和GoogleMaps證明前端可獨立處理復雜交互核心影響二:推動前后端職責分離,后端專注提供API接口,前端負責交互邏輯與數據渲染貢獻:鏈式調用語法大幅簡化DOM操作貢獻:統一跨瀏覽器兼容方案,覆蓋IE6至IE9兼容問題局限:缺乏數據驅動視圖機制,大型項目易陷入"回調地獄"MVC框架的第一次范式革命(2010-2011)核心創新關鍵缺陷框架Backbone.js(2010年)模型-視圖數據綁定需手動更新DOMAngularJS(2010年)雙向數據綁定與依賴注入臟檢查機制導致性能瓶頸Ember.js(2011年)采用"約定優于配置"范式學習曲線陡峭系統化引入桌面開發理念,但未徹底解決視圖層性能與開發體驗問題1.1.3

前端框架演進與技術范式迭代三足鼎立的現代框架(2013年至今)React(2013年)Vue(2014年)Angular(2016年重構)虛擬DOM(VirtualDOM)實現高效視圖更新組件化與單向數據流實現架構優化函數式組件與Hooks實現邏輯復用漸進式響應式數據綁定基于TypeScript的強類型體系組合式API(CompositionAPI)依賴注入與RxJS實現響應式編程解決邏輯組合問題三大框架采用不同技術手段,大幅提升視圖層性能,奠定現代前端格局1.1.3

前端框架演進與技術范式迭代1.2.1

Vue3框架簡介漸進式框架理念分層結構Vue3是基于MVVM模式的漸進式JavaScript框架由內到外四層同心結構:視圖渲染一最內層基礎能力將框架進行分層設計,每一層可單獨實現并替換根據項目復雜度靈活選擇不同層次和功能組件機制一組件化開發支持簡單系統:采用聲明式渲染機制路由機制一前端路由管理復雜系統:接入組件系統、Vue-router路由、Vuex狀態管理狀態管理一多組件狀態共享什么是Vue3八大改進性能提升:體積更小:多節點支持:CompositionAPl:替代Mixin,靈活復用代碼且支持類型推斷重新設計虛擬DOM,優化模板編譯,改進組件初始化速度對引入進行"剪枝",未使用的引用不打包進項目組件模板不再需要唯一根節點,可含多個節點Suspense組件:TypeScript支持:靈活渲染:自定義渲染API:完全采用TS編寫,無兼容性問題,類型檢善可將子節點渲染到父組件以外的DOM節點等待異步組件解析時支持開發者方便地進行自定義渲染器開發顯示后備內容1.2.1

Vue3框架簡介1.2.2

Vue3的優勢體積較小壓縮后僅33KB,輕量高效,加載速度快基于虛擬DOM通過預先計算優化DOM操作,避免直接操作DOM對象,運行效率更高雙向數據綁定3開發人員無需直接操作DOM,可將更多精力投入業務邏輯生態豐富初學者友好5易于入門,學習成本較低,提供大量學習資料存在許多成熟穩定的基于Vue3的UI框架和組件,可快速實現開發輕量、高效、易學-Vue3是構建用戶界面的理想選擇1.4配置Node.js環境1.3選擇IDENode.js是開源跨平臺的JavaScript運行時環境VSCode:微軟推出的輕量級代碼編輯器,免費開源含內置模塊,可脫離Apache或IIS作為獨立服務器執行下載:官網選擇與操作系統匹配的安裝包支持語法高亮、智能補全、代碼片段、GIT等特性跨平臺支持Windows、macOS及Linux推薦選擇LTS長期支持版,經企業級驗證適合生產環境安裝步驟:官網下載安裝包→安裝簡體中文語言包安裝Vetur插件:驗證安裝:執行node-v查看node版本,npm-v查看npm版本實現Vue3語法高亮,支持自動完成與診斷錯誤VSCode+Vetur插件+Node.jsLTS-前端開發環境就緒1.5安裝Vue31.5.1獨立版本安裝1.5.2CDN方式安裝通過CDN分布式內容分發網絡引入Vue3下載編譯好的Vue3JavaScript腳本到本地1.5.3npm方式安裝1.5.4使用前端腳手架安裝第2章

HelloWorld與Vue3基礎特性2.1Vue3實例創建createApp(RootComponent)mount('#app')mount(:應用實例方法,掛載應用到DOMVue:Vue3庫的全局對象createApp(:新增全局方法,創建應用實例'#app':CSS選擇器,指定掛載目標元素RootComponent:根組件對象(含data、methods、template)constvm=:保存應用實例引用作用:創建Vue3應用實例并指定根組件作用:將Vue3應用掛載到指定DOM元素每個Vue3應用都從createApp(開始,一個頁面可創建多個獨立應用實例組件實例(vm)應用實例掛載機制每個Vue3應用從createApp0開始掛載前:組件未初始化,模板未渲染vm.sdata:響應式數據對象一個頁面可創建多個獨立應用實例掛載后:生成響應式系統,渲染DOMvm.Sprops:接收的props一個應用實例只能掛載一個DOM掛載點元素內容被Vue生成的DOM替換vm.Sel:根DOM元素掛載后生成響應式系統,渲染DOM實現數據的雙向綁定提供對組件所有屬性和方法的訪問應用實例管理全局配置,組件實例提供屬性方法訪問2.1Vue3實例創建響應式系統原理Vue2vsVue3對比創建方法:newVue(})→Vue.createApp(0)data選項必須為函數,返回普通JavaScript對象調用方式:Smount("#app')→.mount("#app")Vue3使用Proxy代理(Vue2用Object.defineProperty)結果:直接獲得組件實例→獲得應用實例依賴追蹤:模板訪問數據時,代理記錄屬性→依賴方映射3避免全局配置污染,鏈式調用更簡潔,支持多個根實例Vue變更通知:數據修改時,代理精確觸發依賴更新實現數據變動時視圖的自動同步更新Proxy代理攔截get/set操作,實現精準的依賴追蹤與變更通知2.1Vue3實例創建Vue3

程序執行流程步驟1步驟4步驟2步驟3步驟5步驟6步驟7建立響應式系統創建根組件對象渲染初始視圖調用Vue.createApp查找DOM元素#app編譯模板加載Vue庫將模板編譯為高效的虛擬DOM渲染函數創建和插入DOM節點,生成響應式系統代理攔截數通過CDN引入或模塊導入Vue3庫定義app對象,包含data、metthods等選項,data必須為函數,返回普通對象傳入根組件對象,創建應用實例通過CSS選擇器定位掛載目標元素據訪問與修改,實現雙向綁定編譯時優化模板+運行時精準更新=原生級渲染性能2.1Vue3實例創建2.2

Vue3生命周期銷毀階段更新階段掛載階段創建階段beforeUnmount實例銷毀前,仍可訪問數據和DOMbeforeCreate→實例初始化,響應式系統和事件機制建立前created→響應式數據初始化完成可訪問data和methodsbeforeMount模板編譯完成,DOM掛載前mounted→DOM掛載完成,可操作DOM節點beforeUpdate-數據變更后,虛擬DOM重新渲染前updated→DOM重渲染完成unmounted-)實例銷毀完成,所有綁定解除鉤子函數均為同步事件,this自動綁定當前組件實例,禁止使用箭頭函數定義2.2.1認識生命周期2.2.2

生命周期鉤子函數beforeCreateeCreatecreated時機:實例初始化后,響應式系統和事件機制建立前時機:響應式數據初始化完成后,DOM掛載前能力邊界:無法訪問data/computed和methods,this.Sel為undefined能力邊界:可訪問data/computed和methods,this.$el仍為undefined適用場景:執行數據相關的初始化邏輯適用場景:執行與組件狀態無關的初始化邏輯典型應用:發起APi請求獲取數據、初始化第三方庫、設置定時器典型應用:在根實例設置全局加載狀態注意事項:避免操作實例數據或DOM注意事項:避免操作DOM節點beforeCreate無數據訪問權,created有數據訪問權但無DOM訪問權beforeMountmounted時機:模板編譯完成后,DOM掛載前能力邊界:可訪問data/computed和methods,this.時機:DOM掛載完成后能力邊界:可訪問data/computed、methods和渲染完成的DOM節點,this.$el指向根元素執行DOM相關操作初始化圖表庫、綁定原生事件監聽、獲取元素尺寸避免同步修改響應式數據導致循環更新$el仍為undefined適用場景:典型應用:適用場景:執行最后的數據預處理邏輯典型應用:修改即將渲染的數據、初始化不依賴DOM的第三方庫注意事項:注意事項:避免操作真實DOM節點beforeMount可預處理數據,mounted可操作DOM2.2.2

生命周期鉤子函數beforeUpdateupdated時機:數據變更導致的DOM重渲染完成后;能力:可訪問更新后的數據和最新DOM結構;時機:響應式數據變更后,虛擬DOM重新渲染前;能力:可訪問更新后數據,DOM反映舊視圖狀態;應用:記錄滾動位置、保存當前表單狀態;注意:禁止修改響應式數據,避免無限循環應用:根據新DOM調整第三方庫、觸發動畫效果;注意:謹慎操作數據,易導致遞歸更新beforeUnmountunmounted時機:實例銷毀完成后;能力:所有綁定已解除,this.$el為null;應用:記錄銷毀日志、釋放非響應式資源;注意:無法再訪問實例數據或方法時機:實例銷毀前;能力:仍可訪問響應式數據和DOM節點;應用:移除事件監聽、清除定時器、取消網絡請求;注意:避免修改數據或觸發新渲染2.2.2

生命周期鉤子函數2.3數據綁定…Mustache雙大括號語法最簡單常用的數據綁定方法,{msg]標簽被替代為響應式對象值數據改變時插值處內容自動更新示例:Message:{msg}j執行一次性插值,數據改變后內容不更新V-once指令適用于靜態內容場景示例:不會改變:{msg]j響應式驗證在控制臺修改vm.msg的值,頁面文字立刻更新體現了Vue3響應式系統的數據驅動視圖特性Mustache實現響應式綁定,V-once實現一次性渲染2.3.1文本插值JavaScript表達式支持v-html指令與v-bind指令v-html:輸出真正的HTML內容,span內容被替換為原始HTML支持的表達式:{{number+1}}算術運算{ok?"YES":"NO"}三元表達式{{message.split(").reverse().join(")}方法鏈調用注意:v-html忽略Vue數據綁定,不能用于組合局部模板v-bind:綁定HTML屬性,語法v-bind:id=""list-"+id"字符串拼接v-bind:id="dynamicld"不支持:語句(如vara=1)、流控制(如布爾attribute:值為null/undefined/false時屬性不渲染if語句)每個綁定只能包含單個表達式示例:v-bind:disabled="isButtonDisabled"表達式在所屬實例作用域下作為JavaScript語句被解析2.4案例登錄頁面實現通過createApp創建Vue實例,data返回頁面文本數據使用Mustache語法綁定標題、標簽等文本內容頁面結構包含登錄標題區、用戶名輸入框、密碼輸入框功能項包含記住我復選框、忘記密碼鏈接、登錄按鈕data選項必須為函數,返回普通JavaScript對象登錄計算屬性過濾字符需求:輸入框實時顯示輸入內容,小寫字母轉大寫實現步驟:定義data屬性保存輸入→V-model綁定輸入框→計算屬性轉換大小寫→Mustache渲染Vue3移除了過濾器功能,使用計算屬性computed替代計算屬性基于響應式依賴緩存,只有依賴變化時才重新計算計算屬性computed實現數據的派生與格式化處理Vue3

基本指令3.1

條件渲染指令:v-if與v-elsev-if指令組使用要點V-if:根據表達式真假決定是否渲染元素v-else-if:添加額外條件分支,須緊接v-ifv-else-if:添加額外條件分支,須緊接v-ifv-else:最終默認分支,不需要表達式條件變化時完全銷毀或重建DOM指令必須連續使用在相鄰元素上支持template標簽包裹多個元素適合條件不頻繁變化的場景條件為false時不生成任何DOM節點3.1.3

v-show與v-if的區別V-showv-if通過CSS的display屬性控制顯示隱藏根據條件真假決定是否創建DOM元素無論條件真假都會創建DOM元素條件變化時涉及銷毀和重建VS僅切換CSS樣式,性能更高初始渲染成本較高初始渲染更高效頻繁切換用v-show,條件不變用v-if3.2列表渲染指令v-for:基本用法基本語法v-for='iteminitems'items為數據源數組,item為當前元素別名支持可選索引參數:(item,index)initems對象遍歷支持(value,key,index)三參數形式可遍歷對象的所有可枚舉屬性key屬性始終為v-for設置唯一的key屬性使Vue高效跟蹤節點身份避免使用index作為keyv-for還可遍歷整數范圍,如nin103.2.2

數組更新變更方法(修改原數組)非變更方法(返回新數組)filter():過濾元素concat():合并數組slice():截取子數組用新數組替換舊數組即可觸發更新push()/pop():末尾添加或刪除shift()/unshift():開頭刪除或添加splice():插入、刪除或替換sort()/reverse():排序或反轉3.3

數據綁定指令v-bind參數與屬性綁定縮寫語法動態綁定HTML特性,如:href="url"支持組件props的綁定傳遞使用冒號()替代完整v-bind寫法如:href="url"等同于v-bind:href="url"動態綁定合并行為v-bind:[attribute]動態指定屬性名可直接綁定包含多個屬性的對象v-bind="object"與獨立屬性同時存在后定義的屬性值覆蓋先定義的同名屬性3.4

v-model與表單基本用法值綁定規則實現表單元素的雙向數據綁定文本框綁定字符串單個復選框綁定布爾值多個復選框綁定布爾值多個復選框綁定數組單選按鈕綁定value值支持.number和.lazy修飾符文本輸入:value屬性+input事件復選框:checked屬性+change事件實質是語法糖,封裝值更新和事件監聽V-model自動適配不同輸入控件類型3.5

方法、計算屬性與監聽屬性計算屬性computed監聽屬性watch基于響應式依賴進行緩存數據變化時執行異步或開銷大的操作依賴不變時返回緩存結果無緩存,每次變化都執行VS適合多個值變化影響一個值適合一個值變化影響多個值支持deep深度監聽可讀性和邏輯性更好3.6

事件處理監聽事件綁定DOM事件和自定義事件支持內聯表達式或方法引用可監聽所有原生DOM事件v-on(簡寫@)事件處理函數將邏輯封裝到methods選項中保持模板簡潔清晰便于邏輯復用和單元測試多事件監聽使用對象語法同時監聽多個事件如v-on="{focses:Foncsed,blur:Unlown}"Vue3取消.native修飾符,改用emits選項聲明組件事件事件修飾符與按鍵修飾符事件修飾符按鍵與系統修飾鍵按鍵修飾符:stop:阻止單擊事件傳播.prevent:阻止默認行為.capture:事件捕獲模式.self:僅自身觸發once:只觸發一次.passive:不阻止默認行為.enter.tab.esc.space系統修飾鍵:.ctrl.alt.shift.meta.exact:精確控制修飾鍵組合修飾符順序影響行為不要同時使用.passive和,prevent3.6

事件處理3.7

其他基本指令V-cloak

防閃爍指令V-once首次渲染指令元素或組件只渲染一次不需要賦值后續重新渲染視為靜態內容可用于優化更新性能避免頁面加載時的閃爍現象保留在元素上直到編譯完成配合CSS規則使用模塊化開發中通常無需v-cloak3.8

自定義指令鉤子函數注冊方式bind:首次綁定時調用inserted:插入父節點時調用update:VNode更新時調用unbind:解綁時調用全局注冊:Vue.directive('name',0)局部注冊:組件directives選項動態指令參數函數簡寫參數可根據組件實例數據更新如v-mydirective:[argumentj="value"bind和update觸發相同行為時可簡寫可傳入對象字面量自定義指令用于封裝DOM操作,提高代碼重用性3.9

案例實踐案例一:隨機背景色案例二:注冊登錄頁面使用自定義指令v-img,先隨機背景色填充元素區域,圖片加載完成后替換為背景圖,解決網絡慢時圖片加載體驗問題使用v-model綁定表單數據,v-on綁定提交按鈕click事件,prevent修飾符阻止默認提交,直接發送user對象到服務器綜合運用v-model、V-on、v-bind和自定義指令綜合運用v-model、v-on、v-bind和自定義指令第4章

樣式綁定4.1

綁定HTML樣式字符串語法對象語法數組語法直接綁定靜態類名適用于固定樣式場景根據條件動態切換類名鍵為類名,值為布爾表達式組合多個類名或條件對象Vue3會智能合并常規class屬性和v-bind:class綁定的類名4.1.1

對象控制樣式基本用法多字段切換與普通class共存計算屬性綁定通過對象動態切換class屬性值對象中可傳入多個字段同時動態切換多個樣式類復雜邏輯可用計算算屬性返回對象v-bind:class可與普通class屬性共存兩者自動合并,不互相覆蓋類名存在與否取取決于對應布爾值保持模板簡潔,邏輯集中管理適合需要根據狀態頻繁切換樣式的場景4.1.2

數組控制樣式數組語法條件切換將數組傳給v-bind:class在元素上應用一個樣式列表在元素上應用一個樣式列表使用三元表達式切換樣式數組中可混合對象語法如[{active:isActive},errorClass]數組中每個元素對應一個類名多條件時對象語法更簡潔數組語法適合組合多個來源的類名,對象語法適合條件判斷4.1.3在組件中的應用單根元素組件多根元素組件class屬性添加到組件根元素上不會覆蓋根元素已有的樣式需通過$attrs屬性指定接收元素明確指定哪個根元素接收class數據綁定的class同樣適用樣式自動透傳合并避免樣式透傳歧義配合scopedstyle實現封裝組件樣式透傳是Vue3樣式系統的核心特性4.2

綁定內聯樣式:對象語法對象語法v-bind:style綁定JavaScript對象CSS屬性名支持駝峰式或短橫線分隔數據對象綁定可在data中單獨定義樣式對象模板更清晰,避免內聯冗長通過v-bind:style綁定該對象計算屬性綁定復雜樣式邏輯可用計算屬性返回自動響應依賴數據變化緩存結果,性能更優對象語法看起來像CSS,但實際是JavaScript對象4.2.1對象描述樣式4.2.2

數組描述樣式使用場景數組語法v-bind:style的數組語法基礎樣式+覆蓋樣式組合多個條件樣式對象合并將多個樣式對象應用到同一元素如v-bind:style="[baseStyles,moreStyles]"后定義的樣式可覆蓋前面的同名屬性分離公共樣式與動態樣式代碼結構更清晰數組語法適合組合多個來源的樣式對象4.2.3自動添加前綴

4.2.4多重值自動添加前綴多重值樣式Vue3自動偵測需前綴的CSS屬性為style屬性賦多個帶前綴值的數組只渲染最后一個被瀏覽器支持的值自動添加瀏覽器引擎前綴如transform自動添加:-webkit-(Chrome/Safari)-moz-(Firefox)、-ms-(IE)如display:[-webkit-box',"-ms-flexbox",'flex]瀏覽器支持flex則只渲染flex開發者無需手動處理前綴兼容性自動降級4.3實例：實現列表奇偶行不同樣式步驟1步驟2步驟3步驟4定義樣式:為偶數行定義樣式規則v-for循環:使用v-for指令循環輸出表格行攜帶索引參數index奇偶判斷:動態綁定:如使用v-bind:class對象語法(index+1)%2===0加1后判斷對應實際行號even{background-color:#cdedcd}索引從0開始條件為true時應用even樣式實現奇偶行交替著色第5章

組件應用5.1

組件基礎概念獨立可復用根組件Root每個組件是完整的Vue實例,支持data、me-thods、生命周期鉤子等配置組合嵌套Header組件Main組件Footer組件通過組件樹構建復雜界面,實現功能模塊的高度復用接口通信PaginationArticleList通過props和events進行組件間數據傳遞,降低系統耦合度5.1.1基本使用方法組件定義與使用組件復用關鍵規則data必須為函數組件中data選項必須聲明為函數而非對象每次實例化返回全新數據副本,確保狀態獨立為什么不能用對象對象形式會導致所有實例共享同一數據引用造成狀態污染,破壞組件封裝性使用ponent0)定義組件組件可接收data、computed、methods等選項(el除外)注冊后以自定義元素方式使用關鍵語法要求ponent(組件名",{data,template,..)5.1.3組織結構局部注冊全局注冊使用ponent()注冊注冊后可在應用任何組件模板中使用適合通用性強的基礎組件在組件的components選項中注冊僅限父組件模板中使用適合特定場景的專用組件ponent("ButtonCounter',{...)components:(ButtonCounter:MyComponent}命名規則自閉合限制注冊用PascalCase,HTML模板中用kebab-case引用如ButtonCounter引用時寫HTML模板中不能使用自閉合寫法非HTML模板中鼓勵自閉合以表示無內容組件5.1.4

鉤子函數setup0取代beforeCreate和created,封裝大部分組件代碼onBeforeMountonMounted按需導入鉤子函數需從vue中導入,保持項目輕量化組件掛載前后的鉤子importonBeforeUpdateonMounted,onUpdated}fromvue其他鉤子onActivated/onDeactivated(keep-alive相關)onErrorCaptured(錯誤捕獲)數據更新前后的鉤子onUnmounted數據卸載前后的鉤子組件卸載前后的鉤子setup0是CompositionAP的入口,取代了beforeCreate和created5.2.1

通過props向子組件傳遞數據定義props傳遞數據使用數據21在子組件props選項中聲明自定義屬性props:['title']子組件內部可直接訪問prop值模板中通過插值表達式渲染父組件通過屬性向子組件傳值作為自定義屬性寫在組件元素上案例:傳統文化與生態保護子組件SeasonCard定義seasonData屬性父組件傳入節氣數據對象子組件展示節氣名稱、氣候特征、傳統習俗、生態保護信息5.2.2

跨層級傳遞

5.2.3監聽事件5.2.2Provide/Inject5.2.3$emit自定義事件祖先組件子組件觸發this.$emit(\使用provide提供數據provide(\使用inject注入數據觸發事件并傳遞參數后代組件父組件監聽通過v-on指令監聽子組件事件接收子組件傳遞的數據constdata=inject(\注意事項適用場景跨多層組件傳遞,避免逐層傳遞props如主題切換、用戶信息共享注意事項事件名不自動轉換大小寫觸發名與監聽名需完全匹配provide/inject實現跨層級傳遞,$emit實現子→父通信5.3插槽5.3.1基本插槽5.3.2編譯作用域5.3.3后備內容子組件中用聲明占位符插槽內容在父組件作用域編譯slot內可設置默認內容父組件傳入的內容替換占位位置可訪問父組件的數據父組件未提供內容時顯示默認值實現組件結構固定、內容可定制不能訪問子組件的數據提供內容時覆蓋默認值子組件模板父組件傳入內容替換占位符聲明默認內容→父組件未傳入→顯示默認內容5.3.4具名插槽5.3.5作用域插槽5.3.6動態插槽名子組件通過slot綁定數據父組件用v-slot:default='slotProps接收解決插槽內容需訪問子組件數據的問題slotProps包含所有插槽propslot元素用name屬性定義命名插槽V-slotheader指定內容分發目標一個組件可包含多個具名插槽v-slot:[dynamicSlotName]動態指定插槽名根據運行時變量決定內容分發位置具名插槽→多區域分發,作用域插槽→子→父數據傳遞5.4.1動態組件統一渲染入口ComponentAComponentBcurrentComponent切換狀態管理優化代碼復用提升動態組件=component標簽+is屬性+可選KeepAlive緩存性能優化5.4.2

異步組件代碼分割性能優化大型應用拆分為多個小塊減少初始包體積,加速實現懶加載頁面渲染按需加載錯誤邊界僅在需要時加載組件,支持加載狀態和錯誤處理,提升用戶體驗節省帶寬資源方式2(Vue3.2+)直接返回Promise簡潔寫法,適用于簡單場景方式1使用defineAsyncComponent包裝import{defineAsyncComponent}from"vue"5.5

案例5.5.1日歷組件5.5.2彈出層組件核心功能年月切換、日期選擇、閏年判斷月份首日星期計算、空格填充對齊設計思路彈窗獨立于業務模板,掛載到body通過JavaScript動態創建和銷毀實現步驟創建create()函數接收組件配置創建實例并掛載到body組件關閉時移除DOM并銷毀實例調用方式create(Notice,(title,message,duration).show0設計思路核心功能實現步驟關鍵技術點關鍵技術點調用方式watch監聽月份和年份變化methods封裝日期計算邏輯v-for渲染日期列表點擊事件切換選中日期組件化實踐:從基礎組件到復雜交互場景的完整應用第6章

邏輯復用6.1.1

組合式函數概念1無狀態邏輯有狀態邏輯接收輸入后立即返回輸出,不涉及內部狀態管理示例:日期格式化函數formatDate(date)管理隨時間變化的數據狀態,涉及響應式狀態和生命周期示例:跟蹤鼠標位置useMouse()特點:需要響應式系統支持,可跨組件復用特點:純函數,可測試性強組合式函數=基于組合式API封裝有狀態邏輯的函數,命名以use開頭6.1.2

使用ref封裝響應式狀態步驟2步驟3步驟4步驟1定義狀態:使用ref()創建響應式變量編寫更新邏輯:綁定生命周期:暴露狀態:返回普通對象x,y{x,y}x,y組件解構后仍保持響應性定義update(event)函數,通過event.pageX/pageY更新坐標onMounted中添加mousemove監聽onUnmounted中移除監聽X、y,初始值為0返回非響應式對象而非響應式對象,避免解構丟失響應性連接6.2.1

插件的概念插件vs組合式函數插件應用場景插件=應用級/組合式函數=組件級添加全局方法或屬性注冊全局組件或指令集成第三方服務提供應用級功能狀態范圍插件=一次性全局注冊/組合式函數=按需在組件中使用復用粒度插件=全局共享功能/組合式函數=組件內響應式邏輯使用場景插件=包含install()方法的對象,或直接是一個安裝函數6.2.2

定義插件注冊全局組件注冊全局指app.directive()注冊自定義指令,如ponent()注冊可在任意組件中直接使用的組件v-auto-greet依賴注入全局方法/屬性app.config.globalPropertiesvide()注入狀態和方法,組件通過inject()獲取添加全局方法install(app,options)接收應用實例和可選配置選項6.2.3

注冊插件注冊插件調用app.use(plugin,options)安裝插件第一個參數為插件對象,第二個參數為配置選項自動阻止多次注冊相同插件示例:app.use(greetingPlugin,(gretings:()全局組件全局指令inject注入v-auto-greet:evening按鈕點擊問候,支持傳參inject("greeting")獲取狀態和方法,靈活調用模板中直接使用,無需導入根據插件功能靈活選擇一種或多種使用方式6.3.1

混入的概念混入定義混入對象可包含任意組件選項組件使用mixins:[myMixin]引入所有混入選項被混合到組件本身選項中數據對象同名屬性時組件數據優先級更高鉤子函數合并為數組,混入鉤子先于組件執行方法/組件/指令對象合并,沖突時組件覆蓋混入偵聽器合并為數組,混入偵聽器先執行Vue3仍支持混入,但推薦使用組合式函數替代6.3.2

混入的局限性命名沖突多個混入同名數據或方法時難以確定最終生效項兩個混入定義同名count和increment,行為不確定隱式依賴混入邏輯依賴組件中的方法但未明確聲明混入在mounted中調用fetchlUser0,組件必須自行實現可維護性差理解組件完整行為需在多個混入文件間穿梭,修改通用功能難以評估影響范圍Vue3推薦組合式函數解決混入問題,維護Vue2項目時仍可使用6.4.1

DOM基礎JavaScript操作DOMDOM樹結構Document為根節點,包含HTML子節點;HTML包含head和body兩個子節點;每個節點對應一個可編程的DOM對象;可創建、修改、刪除節點或添加事件獲取對象:getElementByld/querySelector/querySelectorAll添加對象:createElement+appendChild更改樣式:SPA頻繁操作DOM帶來性能瓶頸,催生虛擬DOM方案element.style.fontSize/element.style.colorDeemalekcelemslosDocumen'styitheausearanidtroidepruenavoitsdleSize.InoustrouresnpoceddetpercontstyleSventalespeletoreatty,ofthecoment.coranonrgtS6.4.3

虛擬DOM與渲染函數h(函數虛擬DOM創建虛擬節點的核心函數由VNode實例組成的樹形結構,代表真實DOM的抽象操作JavaScript對象比操作真實DOM更輕更新前先比較新舊虛擬DOM差異異步更新隊列減少直接操作DOM的次數模板適合簡單場景,渲染函數適合復雜動態邏輯6.4.4

JSX與函數式組件JSX函數式組件JavaScript的XML擴展,在JS中直接書寫HTML結構,保留模板清晰性的同時獲得渲染函數的靈活性需安裝@vitejs/plugin-vue-jsx并配置無響應式狀態、無組件實例的純函數組件接收props和context參數適合簡單展示性組件6.4.5函數式組件6.5案例:渲染帖子列表Listltem組件:渲染單個帖子,展示標題/作者/時間/點贊數ContentList組件:管理帖子數據,渲染整個列表使用h()函數+resolveComponent構建動態列表第7章

Vue3

路由7.1Vue3路由基礎URL與組件精準綁定特定URL對應特定組件,無需后端額外開發路由接口什么是VueRouter無刷新跳轉與數據傳遞Vue3官方路由管理器,管理URL路徑與Vue組件的映射關系,實現URL變化但瀏覽器不刷新頁面的跳轉效果router-link替代a標簽,支持動態路由參數和查詢參數傳遞數據復雜場景路由管控嵌套路由、路由守衛、路由懶加載在HTML與JavaScript中使用VueRouterHTML中使用JavaScript中使用步驟一:引入vue-router@4腳本步驟一:定義路由組件2.步驟二:定義路由配置數組routes徑3.步驟三:創建router實例并傳入routes4.步驟四:創建應用實例并掛載router步驟二:使用router-link組件創建導航鏈接,通過to屬性指定路徑3.步驟三:使用router-view組件作為路由出口,渲染匹配到的組件7.2

動態路由將給定模式的URL映射到同一個組件,適用于內容不同但結構相同的頁面/product/2動態段:id/product/1/product/abcProductDetail用冒號:表示動態段,捕獲URL中的可變部分作為參數7.2.1

獲取路由參數獲取路由信息constroute=useRoute()CompositionAPI方式獲取當前激活路由訪問動態參數route.params.idparams對象包含從URL解析出的動態參數模板中直接使用useRoute用于組件邏輯中,$route用于模板中$route.params.id模板中可直接使用$route便捷訪問7.2.2

高級匹配模式自定義正則表達式右上格小字號標題(path:(\user//:idd9+))可重復參數內容*都配零個或多個段,+配配一個或多個段參數以數庫形式存于pathMatch中限制則參數格式,如僅匹配數字左下格小字號標題右下格小字號標題可選參數內容大小寫下敏感,內容sensitive:true默認在區對大多底宙,加加sensitive使用區分path://\search//query參數可出現零次或一次7.2.3

匹配優先級靜態路由path:"/about"優先級最高,無動態部分帶靜態前綴的動態路由有明確靜態前綴同級路由按定義順序,更具體的放前面多動態段路由"/post/:category/:id"動態段越多越具體自定義正則動態路由"/user/:id(\d+)"正則越嚴格優先級越高通配符路由"/:pathMatch(.*)*優先級最低,通常處理4047.3.1-7.3.2

動態路由與嵌套路由響應路由參數變化嵌套路由同一組件被復用時setup只執行一次,需顯式監聽參數變化/dashboard父組件需提供router-view作為子路由渲染出口使用watch監聽route.params通用響應式方案settingsprofile使用onBeforeRouteUpdate組件內導航守衛,推薦方案子路由路徑不加斜杠settings7.3.3

導航守衛全局前置守衛路由獨享守衛組件內守衛onBeforeRouteEnter、onBeforeRouteUpdate、onBeforeRouteLeaverouter.beforeEachbeforeEnter直接定義在路由配置上,僅進入該路由時觸發貼近組件業務邏輯,分別在進入前、更新時、離開前調用每次導航觸發時異步執行,常用于登錄驗證應用場景:權限驗證、數據預加載應用場景:角色權限檢查7.3.4路由元信息&7.3.5路由懶加載路由元信息metameta:{requiresAuth:true,title:"個人中心"}為路由添加自定義數據,可在守衛或組件中訪問結合afterEach鉤子可動態設置頁面標題路由懶加載component:import('../views/About.vue')可通過webpackChunkName將多個組件打包到同一chunk初始加載只下載當前頁面代碼,訪問路由時才加載對應組件7.3.6編程式導航

編程式導航高級技巧與實踐總結router.push(location)跳轉到新頁面,添加history記錄keep-alive緩存組件保留頁面狀態scrollBehavior自定義滾動位置router.replace(location)替換當前頁面,不添加history記錄router.go(n)在history記錄中前進或后退n步優先使用命名路由集中管理權限邏輯于全局守衛始終使用路由懶加載優化首屏第8章

axios異步請求8.1.1

axios簡介axios是一個基于Promise的HTTP庫,可用于瀏覽器和Node.js環境跨端支持攔截機制PromiseAPI瀏覽器創建XMLHttpRequests,Node,js創建HTTP請求可攔截請求和響應,統一處理邏輯原生支持Promise鏈式調用優雅處理異步數據轉換請求取消安全防護自動轉換請求數據和響應數據客戶端支持防御XSRF攻擊,自動轉換JSON數據支持取消正在進行的請求8.1.2

安裝axiosnpm安裝bower安裝CDN引入npminstallaxiosscript標簽引入適用于快速原型開發適用于Vue3腳手架項目,推薦方式可配合vue-axios插件一起安裝bowerinstallaxios適用于傳統前端項目無需構建工具,直接在HTML中引入npminstallaxiosvue-axios安裝vue-axios后,組件內可通過this.axios調用8.1.3

基本使用方法GET請求POST請求通過URL傳遞參數,使用params配置對象傳遞查詢參數;成功時調用then()回調處理響應;失敗時調用catch()回調處理錯誤通過請求體發送數據,比get多一個data參數;同樣使用then/catch處理響應與錯誤關鍵語法:axios.post(url,data)關鍵語法:axios.get(url,{params})并發請求使用axios.all()同時發起多個請求;配合axios.spread()將結果展開分發關鍵語法:axios.all(fn1,fn2).then(axios.spread(callback))8.2AxiosAPIaxios(config)通過配置對象指定method、url、data等參數適用于需要靈活配置的復雜請求場景關鍵語法:axios(method,url,data})config配置發送請求axios(url[,config])axios(url[,config])axios(url[,config])直接傳入URL,默認使用GET方法簡化寫法,適用于簡單請求axios(\關鍵語法:接收響應config方式是axios最靈活的調用方式,所有別名方法底層都基于此請求方法別名創建實例無需在config中指定method,直接使用對應方法使用axios.create()創建自定義實例可預設baseURL、timeout、headers等配置查詢數據數據數據更新數據更新數據刪除數據常用授求axiosaxios.get(url)axios.post(ur,data)axios.put(url,data)axios.delete(url)axios.request(config)關鍵語語:constinstance=axios.createlbaseURL,timeout,headers})實例上同樣可使用所有別名方法不同模塊可創建不同實例,配置互不干擾每個別名函數自動設置對應的HTTP方法8.2AxiosAPI8.3

適配網絡請求urlmethod請求方法,請求的服務器地址,必填參數默認值為getbaseURL自動拼接在url前面便于使用相對路徑headers自定義請求頭信息dataparamsURL查詢參數,以對象形式傳遞請求體數據,用于POST/PUT/PATCHtimeout請求超時毫秒數,0表示無超時responseTypejn響應數據類型,默認jsonurl為必填項,其余配置均有默認值8.3適配網絡請求響應結構默認配置data:服務器提供的響應數據全局默認值:axios.defaults.baseURLstatus:HTTP狀態碼,如200axios.defaults.headers:設置通用請求頭實例默認值:創建實例時預設配置statusText:HTTP狀態信息,如OK創建后修改:instance.defaults.headersheaders:服務器響應頭信息config:請求時的配置信息配置優先級:請求config>實例defaults>庫默認值8.4

攔截器發送請求請求攔截器服務器響應攔截器then/catch處理請求攔截器響應攔截器在請求發送前攔截,可修改請求配置添加自定義headers、轉換請求數據關鍵語法erceptors.request.use(onFulfilled,onRejected)在響應到達then/catch前攔截統一處理響應數據、錯誤狀態碼關鍵語法erceptors.response.use(onFulfilled,onRejected)使用eject()可移除已添加的攔截器在鍵語語法Xeaix用戶有拉測加可設產仲需臺藍明浙,連備分享符合可請到數的用戶導清勵,更扶攔截器8.4

適配網絡請求錯誤處理取消請求使用CancelToken創建取消令牌關鍵語法constsource=CancelTokensource()Ocatch回調中區分三種錯誤類型:error.response服務器返回了響應,狀態碼超出范圍可獲取status、data、headers等錯誤詳情(代碼樣式標注);第三點將token傳入配置配置的cancelToken領域第四點利用source.cancel(message)source.cancel(message)source.cancel(message)取消請求第五點通過axes.isCancel)判斷利用為取消操作error.request請求已發送但未收到響應檢查網絡連接或服務器狀態error.message請求配置出錯檢查請求URL、參數等配置第9章

VueCLI部署項目9.1.1

什么是VueCLI

CLI-全局安裝,提供vue命交互式項目腳手架CLI服務一零配置原型開發局部依賴,構建于webpack之上CLI插件-可升級的運行時依賴以@vue/cli-plugin-開頭,提供可選功能9.1.2安裝VueCLI9.1.2npminstall-g@vue/cliyarnglobaladd@vue/cli升級驗證安裝(npmupdateg@vue/cli)(vue--version)項目內升級使用vueupgradevuebuildvuecreatevueserve零配置啟動開發服務器,適合快速原型開發零配置構建生產環境包創建完整新項目-p使用預設-d默認預設--bare省略新手引導-O打開瀏覽器-C復制URL-t指定構建目標-d指定輸出目錄9.1.2創建HelloWorld項目9.1.4了解VueCLI項目結構node_modules/-第三方依賴用接杵個約分鞋src目錄是開發核心區域,包含入口文件main.js、根組件App.vue及自定義組件public/-模板與資源文件主體極文件hello-world/src/-主體代碼(assets、components、App.vue、main.js)第件文件配置文件-packagejson、babel.configjs等9.2.1了解webpack模塊依賴圖Dependency入口Entry輸出Loader轉換BundleGraphwebpack是靜態模塊打包工具,構建內部依賴圖,映射項目所需每個模塊,生成一個或多個打包文件插件PluginsLoader對象形式函數形式confgureWebpack:{plugins:[..]configureWebpack:config{..}對象會被webpack-merge合并到最終配置中可基于環境變量條件修改配置注意:部分webpack選項需通過vue.config.js間接修改,如outputDir代替output.path9.2.2配置webpack-confgureWebpack修改Loader選項替換Loader修改插件選項config.module.rule()svgRule.uses.clear()后添加新loaderconfig.plugin()..tap(args=>{).use().tap()VueCLI使用webpack-chain維護內部配置,提供具名的loader規則和插件定義9.2.2配置webpack-confgureWebpack審查webpack配置vueinspect>output.jsvueinspect--rulevuevueinspect--pluginhtmlvueinspect--rules以文件方式使用配置審查特定規則路徑:node_modules/@vue/cli-service/webpack.config.js,供IDE或CLI工具訪問通過--rule參數指定規則名稱查看詳細配置9.2.2配置webpack-confgureWebpack9.3構建與部署VueCLI項目構建目標通過-target選項指定構建目標,默認應用模式:HTML注入資源、第三方庫獨立分包、小資源內聯部署將dist目錄部署到靜態文件服務器,確保正確確的publicPath配置本地預覽serve-sdist-s參數啟用SPA模式,處理路由問題第10章

Vuex組件狀態管理10.1

Vuex介紹官方狀態管理方案Vuex是Vue.js官方狀態管理解決方案,通過集中式狀態存儲和規范化數據流轉構建可維護的應用架構五大核心特性單一狀態樹作為唯一數據源、顯式聲明狀態變更邏輯、封裝異步操作、派生狀態計算、模塊化組織單向數據流機制Stor容器強制實施View-Actions-Mutations-→State→View的數據流轉,配合開發者工具實現狀態快照和時間旅行調試設計思想來源借鑒Flux、Redux和TheElmArchitecture的設計思想,專為Vue3設計,充分利用細粒度數據響應機制與Pinia的關系Vue3推薦使用Pinia作為新一代狀態管理方案,但Vuex4仍保持對Vue3的兼容支持View2驅動應用的數據源以聲明方式將State映射到視圖3ActionsView→Actions→響應用戶輸入導致的狀態變化MutationsMutations接收Actions提交,變更StateState→State→ViewActionsVuex的解決方案多組件共享狀態的問題將共享狀態抽取為全局單例管理,組件樹形成巨大視圖,任意組件可獲取狀態或觸發行為多個視圖依賴同一狀態時傳參繁瑣,嵌套組件層層傳遞困難,兄弟組件件間狀態同步無力10.1

Vuex介紹10.2Vuex安裝包管理器安裝獨立構建方式使用npm安裝:執行'npminstallvuex@next--save'命從GitHub克隆代碼倉庫到本地使用yam安裝:執行yarnaddvuex@next--save'命進入vuex目錄,執行yarn安裝依賴注意事項:需安裝支持Vue3的vuex@next版本,支持Vue2的版本名為Vuex(不帶@next)執行yarnbuild構建項目適用于需要使用dev分支最新版本的場景10.3Vuex的核心容器2不可直接修改改變store狀態的唯一途徑是顯式提交mutation,便于跟蹤每一個狀態的變化響應式狀態組件注入Store當Vue3組件從store讀取狀態時,若狀態發生變化,組件會得到高效更新通過app.use(store)安裝,組組件中使用this.Sstore訪問store實例關鍵語法createStore(state((.,mutations:(.)app.use(store)this.Smit'type')this.Sstore.statemapState輔助函數直接獲取狀態在計算屬性中返回store.state每當store.state.count變化,計算屬性重新計算并觸發DOM更新Vuex通過插件系統將store注入所有子組件解決組件獲取多個狀態時的冗余問題對象寫法:"mapState({count:state=>state.count,countAlias:"count"})"數組寫法:"mapState("count))])映射同名屬性"組件通過this.Sstore訪問,無需步頻繁導入對象展開運算符:"..mapState(...3混入外部computed對象10.3Vuex的核心容器10.4

Vuex狀態獲取方法派生狀態的需求有時需要從store的state中衍生狀態,例如對列表進行過濾并計數,在組件中重復計算會冗余定義Getter函數在store的getters中定義函數,接受state作為第一個參數,也可接受其他getter作為第二個參數,實現getter之間的依賴State→Getter→Component屬性訪問方式Getter暴露在store.getters對象中,以屬性形式訪問,組件中使用計算屬性訪問:this.Sstore.getters.xx10.4Vuex狀態獲取方法mapGetters輔助函數函數訪問將store中的getter映射到局部計算屬性數組形式:...mapGetters("doneTodosCount","anotherGetter"])重命名形式:..mapGetters(doneCount:"doneTodosCount"})使用對象展開運算符混入computed對象通過getter返回一個函數,實現給getter傳參適用場景:對store中的數組進行查詢關鍵語法:getter返回(state)=>(id)=>的(state)=>(id)=>的柯里化函數調用方式:store.getters.getTodoByld(2)10.5Vuex狀態同步更改方法提交Payload定義Mutation對象風格提交通過mit傳入額外參數,即載荷;建議載荷使用對象形式;調用方式:mit(increment',10)在mutations中定義,包含type類型和handler回調函數;handler第一個參數是state;handler不能直接調用,需通過mit觸發直接使用包含type屬性的對象提交;整個對象作為載荷傳給mutation函數;調用方式:mittype:"inc-rement,amount:10);handler接收payload對象并讀取屬性更改store狀態的唯一方法是提交mutationTe10.yourmicatehaverangrebitorecomoratic.hadgmdltypenuhcreetateandma10.6Vuex狀態異步更改方法ActionvsMutation分發ActionActin提交的是mutation,而非直接變更狀態通過store.dispatch(觸發:store.dispatch(increment')異步示例:在action內部使用setTimeout執行異步操作后commit組件中使用this.Sstore.dispatch0分發Action可以包含任意異步操作Action函數接受context對象,可調用context