第2章 Hello World與Vue3基礎特性

第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選項必須為函數,返回普通Jav