：從入門到工程化與面試考點全解析)
做過幾年前端之后回看我對Vue.js最服氣的一點恰恰是“漸進式框架”這個定位。它不是那種逼你全量擁抱的“全家桶式”框架而是允許你從一個頁面、一個按鈕、一個組件開始一點一點把整個前端工程帶起來。這個設(shè)計哲學(xué)讓Vue.js幾乎成了前端開發(fā)里門檻最低、最容易被團隊接受的方案。不管你是剛?cè)胄械男氯诉€是長期寫jQuery、React想換個技術(shù)棧的老手只要理解了“漸進式”這三個字就相當于拿到了打開Vue世界的大門鑰匙。這篇內(nèi)容我不會照著文檔給你念一遍API而是從實戰(zhàn)角度聊聊Vue.js核心思路、項目搭建、工程化演進、周邊生態(tài)里的高頻坑以及面試里那些繞不開的考點。文章會照顧到零基礎(chǔ)讀者也會給有經(jīng)驗的人一些之前文檔里看不到的實操細節(jié)。1. 漸進式框架Vue.js解決的核心問題1.1 “漸進式”三個字到底說的是什么很多人把“漸進式”當營銷話術(shù)實際用下來才會發(fā)現(xiàn)這真的是Vue的核心設(shè)計原則。用生活里的例子解釋你請客吃飯不會要求客人一上來就把滿漢全席吃完而是先上一道涼菜覺得好吃了再依次上熱菜、湯、甜點。Vue.js把前端工程拆成了很多層每一層都是可選的你自己決定用到哪一層。具體拆開看Vue的家族體系大概是這樣的層級對應(yīng)工具作用是否必須核心庫vue負責視圖渲染和響應(yīng)式數(shù)據(jù)必須路由vue-router管理頁面跳轉(zhuǎn)與URL映射按需狀態(tài)管理Pinia / Vuex跨組件共享復(fù)雜數(shù)據(jù)按需工程化Vite / Vue CLI構(gòu)建、熱更新、打包按需組件庫Element Plus / Ant Design Vue提供現(xiàn)成UI組件按需核心庫做不了的事比如復(fù)雜的狀態(tài)共享、多頁面路由你可以等到項目真的需要時再引入對應(yīng)工具不需要一開始就搭建一套完整體系。這和Angular那種“開箱即得一切”的框架形成了明顯對比后者適合大型團隊從0統(tǒng)一定規(guī)范但想拿它改一個老項目成本和遷移難度會大得多。為什么這個理念能解決實際痛點我見過太多團隊一上框架就恨不得把全家桶全部裝齊結(jié)果項目還沒寫幾行光是配置路由、狀態(tài)管理、模塊化構(gòu)建就勸退了一批人。Vue的漸進式設(shè)計等于讓你“邊吃邊點”需要什么加什么學(xué)習(xí)成本和試錯成本都被降到了很低。1.2 為什么是Vue而不是React或Angular聊Vue很難避開一個橫向?qū)Ρ犬吘骨岸巳Α翱蚣苤疇帯笔隂]停過。先說結(jié)論選Vue不是因為React或Angular不行而是Vue在“上手速度”和“工程能力”之間找到了一個罕見的平衡點。React的核心優(yōu)勢是生態(tài)龐大、函數(shù)式編程思維深入人心但它給你的更多是一個“用JS寫UI”的理念組件怎么寫、數(shù)據(jù)怎么流動、工程結(jié)構(gòu)怎么設(shè)計需要你自己探索。對新人和小團隊來說這種自由度往往會變成負擔。Angular則走向另一個極端它提供了完整的企業(yè)級方案依賴注入、裝飾器、RxJS學(xué)習(xí)曲線陡峭得能勸退大部分前端初學(xué)者。Vue走的路線更“務(wù)實”。模板語法貼近HTML會寫網(wǎng)頁的人基本零成本入門響應(yīng)式數(shù)據(jù)又是聲明式的你不用手動操作DOM數(shù)據(jù)變了頁面自己跟著變。Vue的模板讓你把關(guān)注點放在“頁面長什么樣”上而不是“怎么操作DOM”上這一點對團隊協(xié)作非常友好后端同事臨時來看代碼也不至于一頭霧水。如果再算上社區(qū)因素Vue的中文文檔和社區(qū)討論量在國內(nèi)是碾壓級的Element UI/Element Plus這類組件庫的成熟度也極高。選型時有句實在話“技術(shù)無所謂好壞關(guān)鍵在于團隊能多快上手?！盫ue恰好把“快”字做到了極致。2. 動手實操從零搭建一個Vue.js項目2.1 環(huán)境準備與腳手架選擇搭建Vue項目現(xiàn)在最推薦的是Vite而不是老牌的Vue CLI。Vite基于原生ESM冷啟動快到離譜熱更新也是毫秒級反饋開發(fā)體驗完全碾壓Webpack時代的Vue CLI。你只需要本地裝了Node.js 18以上版本就能動手。安裝工具和創(chuàng)建項目的命令很簡單我這里用pnpm舉例如果你習(xí)慣npm直接替換命令就行# 全局安裝pnpm如果有則跳過 npm install -g pnpm # 用Vite官方腳手架創(chuàng)建Vue項目 pnpm create vuelatest my-vue-app執(zhí)行過程中CLI會問你幾個問題比如是否安裝TypeScript、路由、狀態(tài)管理、測試工具等。注意這里的提問方式它不會強制你裝所有東西而是讓你像點菜一樣選。剛開始學(xué)的人先只選Router路由其他能不加就不加這樣才能體會“漸進式”的妙處。項目的名字建議用英文小寫多個單詞用中劃線分隔這是社區(qū)約定俗成的規(guī)范。進入目錄并啟動開發(fā)服務(wù)cd my-vue-app pnpm install pnpm dev瀏覽器打開終端里提示的地址就能看到Vue的默認歡迎頁。這里有一個實操心得如果啟動時報錯端口被占用Vite默認會自動跳到另一個端口不用手動折騰。真正容易出問題的反倒是Node版本過低建議用node -v確認版本Vite 5以上對Node版本有硬性要求。2.2 工程目錄結(jié)構(gòu)與核心語法速覽項目創(chuàng)建好以后先花時間把目錄結(jié)構(gòu)看明白這比急著寫代碼更重要。Vite創(chuàng)建的Vue3項目默認長這樣目錄/文件作用src/開發(fā)源碼主目錄src/main.js應(yīng)用入口文件創(chuàng)建并掛載Vue實例src/App.vue根組件src/components/通用業(yè)務(wù)組件src/router/路由配置public/靜態(tài)資源打包時原樣復(fù)制index.html頁面入口掛載點在這里vite.config.jsVite配置文件Vue3最常用的寫法是單文件組件SFC一個.vue文件里同時寫模板、腳本和樣式。下面這個計數(shù)器組件基本覆蓋了Vue3的核心語法script setup import { ref, computed } from vue const count ref(0) const doubleCount computed(() count.value * 2) function increment() { count.value } /script template div p當前計數(shù){{ count }}/p p雙倍計數(shù){{ doubleCount }}/p button clickincrement1/button /div /template style scoped button { padding: 8px 16px; cursor: pointer; } /style這段代碼里有幾個關(guān)鍵點要解釋一下。ref用來創(chuàng)建一個響應(yīng)式數(shù)據(jù)讀取和修改都要通過.value屬性computed則是根據(jù)已有響應(yīng)式數(shù)據(jù)派生出來的“計算值”它會有緩存依賴不變就不會重新計算。script setup是Vue3引入的語法糖組件導(dǎo)入、變量聲明、函數(shù)定義都能直接使用省去了export default那一大套配置。整個SFC的響應(yīng)式邏輯可以總結(jié)成一句話數(shù)據(jù)變了引用這個數(shù)據(jù)的模板片段自動更新。你不需要手動操作DOM也不需要考慮什么時候該更新框架在背后用依賴收集和虛擬DOM幫你打點好了一切。3. 工程化進階組件化、路由與狀態(tài)管理3.1 組件化開發(fā)的拆法與通信等你能用Vue寫出一個完整頁面下一步就是考慮怎么把它拆成組件。組件化的核心原則是“高內(nèi)聚、低耦合”翻譯成人話就是一個組件只做一件明確的事對外暴露的接口盡量少。舉個場景一個后臺管理系統(tǒng)的用戶表格如果你把所有代碼都堆在一個頁面里很快就會膨脹到幾千行后期維護直接崩潰。正確做法是拆成UserTable.vue負責表格展示、UserForm.vue負責新增/編輯表單、Pagination.vue負責分頁跳轉(zhuǎn)頁面組件只負責組合調(diào)度它們。組件之間的通信方式有幾種按使用頻率排序props與emits父組件通過props向子組件傳數(shù)據(jù)子組件通過emits向父組件派發(fā)事件。這是最基本的數(shù)據(jù)流。provide/inject跨多層組件傳數(shù)據(jù)用比如全局主題色配置不用一層一層透過中間組件轉(zhuǎn)發(fā)。slot插槽把子組件內(nèi)部的位置留出來讓父組件決定填充什么內(nèi)容適合做容器類組件。Pinia共享狀態(tài)多個非父子組件之間共享數(shù)據(jù)比如用戶登錄信息。這里有一個實戰(zhàn)中的常見反問到底什么時候該用Pinia我的標準很簡單如果數(shù)據(jù)只在一個組件內(nèi)部使用老老實實寫ref如果兩個以上的組件需要共用且通信路徑很深再引入Pinia。過早引入狀態(tài)管理只會讓代碼多一層不必要的復(fù)雜度。這也是漸進式框架在工程實踐上最直接的體現(xiàn)。3.2 路由與狀態(tài)管理Vue Router與Pinia多頁面應(yīng)用離不開路由。Vue Router的用法我已經(jīng)寫過很多次這里把關(guān)鍵配置貼出來import { createRouter, createWebHistory } from vue-router import HomeView from ../views/HomeView.vue const router createRouter({ history: createWebHistory(), routes: [ { path: /, component: HomeView }, { path: /about, component: () import(../views/AboutView.vue) } ] }) export default router重點注意兩點。第一createWebHistory是HTML5的History模式URL里不會出現(xiàn)#視覺上更清爽但部署時服務(wù)器要做好路徑回退配置否則刷新二級頁面會404。第二非首屏組件用動態(tài)導(dǎo)入() import(...)實現(xiàn)路由懶加載框架會自動把它拆成獨立分塊首屏加載體積能明顯變小。路由守衛(wèi)也是實際業(yè)務(wù)里的硬需求比如只有登錄后才能訪問某個頁面。在路由配置后加一個beforeEach全局前置守衛(wèi)檢查本地存儲里的登錄狀態(tài)沒登錄就redirect到登錄頁幾行代碼就能完成權(quán)限控制。狀態(tài)管理方面現(xiàn)在Vue官推的是Pinia相比Vuex最大的變化是刪除掉了mutations和getters的繁瑣概念直接寫在store里即可。一個簡單的計數(shù)器Store長這樣import { defineStore } from pinia export const useCounterStore defineStore(counter, { state: () ({ count: 0 }), actions: { increment() { this.count } } })看到區(qū)別了嗎在Pinia里修改狀態(tài)的actions直接寫在Store對象里不需要像Vuex那樣再多寫一層mutations。TypeScript類型推導(dǎo)也更順暢代碼量和心智負擔都小了不止一個檔次。從我自己的遷移經(jīng)歷看從Vuex換成Pinia幾乎是無痛遷移收益卻立竿見影。4. 生態(tài)協(xié)奏Element Plus與Vue DevTools實戰(zhàn)4.1 組件庫選型Element Plus還是Element UI說Vue生態(tài)強繞不開組件庫。Element UI和Element Plus傻傻分不清是每個Vue新手都會踩的坑。這倆不是版本升級那么簡單而是適配不同Vue版本的獨立項目Element UI對應(yīng)Vue 2系列2.6以下Element Plus對應(yīng)Vue 3系列。項目里如果用的是Vue3卻安裝了Element UI主頁能渲染出來但表格、彈窗等組件運行時會報一堆樣式錯亂和依賴缺失。對多數(shù)后臺管理系統(tǒng)來說Element Plus是主流選擇組件全、API穩(wěn)定、有完整中英文文檔。安裝和全量引入一行代碼搞定pnpm add element-plus// main.js import ElementPlus from element-plus import element-plus/dist/index.css app.use(ElementPlus)不過我要敲個重點全量引入Element Plus會讓打包體積增大不少十幾萬用戶的項目光是這三個庫的包就能多出一兩百KB。進階玩法是用unplugin-auto-import和unplugin-vue-components插件實現(xiàn)按需自動導(dǎo)入配合Vite配置哪個組件用到了就打包哪個體積能優(yōu)化近一半。這個優(yōu)化同時還會讓Element Plus的樣式自動被注入不需要手動引用CSS。實際寫業(yè)務(wù)時Element Plus最值錢的是表格和表單組件的組合玩法。表格支持自定義列、分頁、排序、多選表單驗證用rules屬性比如“用戶名必填且至少6位”這樣的規(guī)則配置后提交時自動幫你校驗不用手寫一堆正則判斷邏輯。4.2 Vue DevTools打不開的排查實錄熱詞里有個搜索頻率很高的問題“vue.js devtools (v5)插件為什么打不開了”。這個我太有發(fā)言權(quán)了因為我自己和身邊同事都在Chrome里遇過好幾次。先給結(jié)論絕大多數(shù)打不開都集中在下面這幾個原因現(xiàn)象最常見原因解決辦法插件圖標亮但面板空白使用了舊版DevTools只支持Vue2更新到V5或按項目Vue版本選對應(yīng)插件本地開發(fā)項目檢測不到production模式被誤開檢查vite.config.js確認開發(fā)環(huán)境處于development顯示“page not detected”瀏覽器擴展權(quán)限被重置進擴展管理頁重新允許訪問該站點插件圖標灰了頁面沒運行Vue或版本過新確認框架版本與插件版本兼容排查邏輯其實很簡單先在地址欄訪問 chrome://extensions/確認Vue DevTools插件處于“已啟用”狀態(tài)然后點“詳細信息”查看“網(wǎng)站訪問權(quán)限”是否包含你正在調(diào)試的域名常用的是localhost和127.0.0.1。接下來打開目標頁面右鍵選擇“檢查”打開DevTools找到Vue標簽頁。如果還是打不開就試試插件面板里的“重新加載”按鈕。還有一個很多人踩過的坑瀏覽器商店里存在大量假冒的“Vue Devtools”擴展名字只差一兩個字母裝上以后不僅不干活還可能竊取頁面數(shù)據(jù)。認準官方發(fā)布者“vuejs”的擴展別裝錯了。V5版本的DevTools還支持脫離瀏覽器窗口獨立打開調(diào)試面板適合多屏開發(fā)場景在插件設(shè)置里勾選“彈出面板”即可。5. 高頻面試題背后的Vue.js知識體系5.1 前端開發(fā)面試題里的高頻考點熱詞里有“前端開發(fā)工程師面試題”說明很多人是帶著準備面試的目的來搜Vue的。把近兩年的面試題匯總一下發(fā)現(xiàn)Vue相關(guān)的考察點高度集中在下面這幾塊考察方向高頻問題核心能力生命周期created和mounted有什么區(qū)別是否理解掛載階段和異步請求時機響應(yīng)式Vue3響應(yīng)式是怎么實現(xiàn)的是否能講清Proxy和Reflect模板渲染v-if和v-show怎么選是否理解條件渲染的性能差異組件通信父傳子、子傳父怎么寫是否掌握props/emits和provide/inject性能優(yōu)化列表為什么需要key是否理解diff算法的復(fù)用邏輯異步更新nextTick是干什么的是否理解DOM更新是異步批量的先說v-if和v-show這個看似簡單的問題。v-if是真正的條件渲染條件為假時組件連DOM都不會掛載適合切換頻率低、初始渲染成本高的場景v-show只是切換CSS的display屬性組件始終存在適合高頻切換。最優(yōu)選擇取決于組件掛卸載的成本和切換頻率這就是典型的“知其然更知其所以然”。再說key。列表渲染時給每一行加一個穩(wěn)定的key本質(zhì)上是告訴虛擬DOM“這一行代表的是這條數(shù)據(jù)”而不是“這個位置的DOM”。加了key之后數(shù)據(jù)順序變化時Vue能精確地移動、更新對應(yīng)的DOM節(jié)點而不是把所有節(jié)點全部銷毀重建。這也是面試官區(qū)分你有沒有真正上手寫過大型列表的試金石。5.2 從一個響應(yīng)式原理題拆解Vue設(shè)計思路面試里“說說Vue3的響應(yīng)式原理”幾乎是必考題。Vue2用的Object.defineProperty只能攔截對象的屬性讀寫對新增和刪除屬性就束手無策所以Vue2提供了Vue.set和Vue.delete這種補救API。Vue3換成Proxy之后直接攔截整個對象的讀寫、刪除、遍歷等操作天然支持新增屬性和動態(tài)key這也成了不少面試官考察候選人是否跟進框架迭代的點。一個比較聰明的回答路徑是先講“數(shù)據(jù)驅(qū)動視圖”的理念再講依賴收集和觸發(fā)更新的閉環(huán)最后落到Proxy的優(yōu)勢對比。依賴收集可以這樣理解數(shù)據(jù)就像寫文章需要用的素材頁面哪塊用到這個數(shù)據(jù)素材箱就會給那塊記一筆賬。數(shù)據(jù)變化時Vue按賬單挨個通知相關(guān)組件去更新沒用到該數(shù)據(jù)的組件完全不受影響。這套機制配合虛擬DOM才讓前端從“手動操縱DOM”順利過渡到了“聲明式更新”。我面試候選人的另一個高頻追問是“computed加緩存和普通方法有什么區(qū)別”。用computed定義的派生數(shù)據(jù)會緩存計算結(jié)果只有它依賴的響應(yīng)式數(shù)據(jù)變化時才會重新計算而普通方法在模板里調(diào)用一次就會執(zhí)行一次。在復(fù)雜計算的列表過濾場景比如幾千條記錄的搜索過濾用computed的緩存優(yōu)勢特別明顯。6. 常見問題與實戰(zhàn)避坑記錄6.1 開發(fā)中繞不開的幾個坑和處理方案寫Vue寫久了有些坑幾乎人人都會踩一次。第一類坑是響應(yīng)式丟失常見場景是給reactive定義的對象直接“覆蓋”了一個新對象或者給數(shù)組某個索引賦值結(jié)果視圖不更新。Vue3對reactive能劫持嵌套對象但直接替換整個對象變量時本質(zhì)上已經(jīng)丟失了原先的代理。辦法很簡單能拆解的就用ref聲明無法避免的用Object.assign把新屬性合并到原對象里。第二類坑是路由重復(fù)跳轉(zhuǎn)報錯比如在/about頁面點按鈕跳到/about控制臺會提示“Avoided redundant navigation”。嚴格來說這只是個警告不影響功能但測試時會讓人疑神疑鬼。規(guī)范做法是在Vue Router 4里給push方法包裹一次重寫或者判斷當前路由不同時再執(zhí)行跳轉(zhuǎn)。第三類坑是真·防不勝防的樣式作用域。給子組件寫樣式時加了scoped屬性卻怎么都不生效尤其涉及第三方UI組件時很常見。scoped只給當前組件的元素添加> Vue.js漸進式框架實戰(zhàn)：從入門到工程化與面試考點全解析
做過幾年前端之后回看我對Vue.js最服氣的一點恰恰是“漸進式框架”這個定位。它不是那種逼你全量擁抱的“全家桶式”框架而是允許你從一個頁面、一個按鈕、一個組件開始一點一點把整個前端工程帶起來。這個設(shè)計哲學(xué)讓Vue.js幾乎成了前端開發(fā)里門檻最低、最容易被團隊接受的方案。不管你是剛?cè)胄械男氯诉€是長期寫jQuery、React想換個技術(shù)棧的老手只要理解了“漸進式”這三個字就相當于拿到了打開Vue世界的大門鑰匙。這篇內(nèi)容我不會照著文檔給你念一遍API而是從實戰(zhàn)角度聊聊Vue.js核心思路、項目搭建、工程化演進、周邊生態(tài)里的高頻坑以及面試里那些繞不開的考點。文章會照顧到零基礎(chǔ)讀者也會給有經(jīng)驗的人一些之前文檔里看不到的實操細節(jié)。1. 漸進式框架Vue.js解決的核心問題1.1 “漸進式”三個字到底說的是什么很多人把“漸進式”當營銷話術(shù)實際用下來才會發(fā)現(xiàn)這真的是Vue的核心設(shè)計原則。用生活里的例子解釋你請客吃飯不會要求客人一上來就把滿漢全席吃完而是先上一道涼菜覺得好吃了再依次上熱菜、湯、甜點。Vue.js把前端工程拆成了很多層每一層都是可選的你自己決定用到哪一層。具體拆開看Vue的家族體系大概是這樣的層級對應(yīng)工具作用是否必須核心庫vue負責視圖渲染和響應(yīng)式數(shù)據(jù)必須路由vue-router管理頁面跳轉(zhuǎn)與URL映射按需狀態(tài)管理Pinia / Vuex跨組件共享復(fù)雜數(shù)據(jù)按需工程化Vite / Vue CLI構(gòu)建、熱更新、打包按需組件庫Element Plus / Ant Design Vue提供現(xiàn)成UI組件按需核心庫做不了的事比如復(fù)雜的狀態(tài)共享、多頁面路由你可以等到項目真的需要時再引入對應(yīng)工具不需要一開始就搭建一套完整體系。這和Angular那種“開箱即得一切”的框架形成了明顯對比后者適合大型團隊從0統(tǒng)一定規(guī)范但想拿它改一個老項目成本和遷移難度會大得多。為什么這個理念能解決實際痛點我見過太多團隊一上框架就恨不得把全家桶全部裝齊結(jié)果項目還沒寫幾行光是配置路由、狀態(tài)管理、模塊化構(gòu)建就勸退了一批人。Vue的漸進式設(shè)計等于讓你“邊吃邊點”需要什么加什么學(xué)習(xí)成本和試錯成本都被降到了很低。1.2 為什么是Vue而不是React或Angular聊Vue很難避開一個橫向?qū)Ρ犬吘骨岸巳Α翱蚣苤疇帯笔隂]停過。先說結(jié)論選Vue不是因為React或Angular不行而是Vue在“上手速度”和“工程能力”之間找到了一個罕見的平衡點。React的核心優(yōu)勢是生態(tài)龐大、函數(shù)式編程思維深入人心但它給你的更多是一個“用JS寫UI”的理念組件怎么寫、數(shù)據(jù)怎么流動、工程結(jié)構(gòu)怎么設(shè)計需要你自己探索。對新人和小團隊來說這種自由度往往會變成負擔。Angular則走向另一個極端它提供了完整的企業(yè)級方案依賴注入、裝飾器、RxJS學(xué)習(xí)曲線陡峭得能勸退大部分前端初學(xué)者。Vue走的路線更“務(wù)實”。模板語法貼近HTML會寫網(wǎng)頁的人基本零成本入門響應(yīng)式數(shù)據(jù)又是聲明式的你不用手動操作DOM數(shù)據(jù)變了頁面自己跟著變。Vue的模板讓你把關(guān)注點放在“頁面長什么樣”上而不是“怎么操作DOM”上這一點對團隊協(xié)作非常友好后端同事臨時來看代碼也不至于一頭霧水。如果再算上社區(qū)因素Vue的中文文檔和社區(qū)討論量在國內(nèi)是碾壓級的Element UI/Element Plus這類組件庫的成熟度也極高。選型時有句實在話“技術(shù)無所謂好壞關(guān)鍵在于團隊能多快上手?！盫ue恰好把“快”字做到了極致。2. 動手實操從零搭建一個Vue.js項目2.1 環(huán)境準備與腳手架選擇搭建Vue項目現(xiàn)在最推薦的是Vite而不是老牌的Vue CLI。Vite基于原生ESM冷啟動快到離譜熱更新也是毫秒級反饋開發(fā)體驗完全碾壓Webpack時代的Vue CLI。你只需要本地裝了Node.js 18以上版本就能動手。安裝工具和創(chuàng)建項目的命令很簡單我這里用pnpm舉例如果你習(xí)慣npm直接替換命令就行# 全局安裝pnpm如果有則跳過 npm install -g pnpm # 用Vite官方腳手架創(chuàng)建Vue項目 pnpm create vuelatest my-vue-app執(zhí)行過程中CLI會問你幾個問題比如是否安裝TypeScript、路由、狀態(tài)管理、測試工具等。注意這里的提問方式它不會強制你裝所有東西而是讓你像點菜一樣選。剛開始學(xué)的人先只選Router路由其他能不加就不加這樣才能體會“漸進式”的妙處。項目的名字建議用英文小寫多個單詞用中劃線分隔這是社區(qū)約定俗成的規(guī)范。進入目錄并啟動開發(fā)服務(wù)cd my-vue-app pnpm install pnpm dev瀏覽器打開終端里提示的地址就能看到Vue的默認歡迎頁。這里有一個實操心得如果啟動時報錯端口被占用Vite默認會自動跳到另一個端口不用手動折騰。真正容易出問題的反倒是Node版本過低建議用node -v確認版本Vite 5以上對Node版本有硬性要求。2.2 工程目錄結(jié)構(gòu)與核心語法速覽項目創(chuàng)建好以后先花時間把目錄結(jié)構(gòu)看明白這比急著寫代碼更重要。Vite創(chuàng)建的Vue3項目默認長這樣目錄/文件作用src/開發(fā)源碼主目錄src/main.js應(yīng)用入口文件創(chuàng)建并掛載Vue實例src/App.vue根組件src/components/通用業(yè)務(wù)組件src/router/路由配置public/靜態(tài)資源打包時原樣復(fù)制index.html頁面入口掛載點在這里vite.config.jsVite配置文件Vue3最常用的寫法是單文件組件SFC一個.vue文件里同時寫模板、腳本和樣式。下面這個計數(shù)器組件基本覆蓋了Vue3的核心語法script setup import { ref, computed } from vue const count ref(0) const doubleCount computed(() count.value * 2) function increment() { count.value } /script template div p當前計數(shù){{ count }}/p p雙倍計數(shù){{ doubleCount }}/p button clickincrement1/button /div /template style scoped button { padding: 8px 16px; cursor: pointer; } /style這段代碼里有幾個關(guān)鍵點要解釋一下。ref用來創(chuàng)建一個響應(yīng)式數(shù)據(jù)讀取和修改都要通過.value屬性computed則是根據(jù)已有響應(yīng)式數(shù)據(jù)派生出來的“計算值”它會有緩存依賴不變就不會重新計算。script setup是Vue3引入的語法糖組件導(dǎo)入、變量聲明、函數(shù)定義都能直接使用省去了export default那一大套配置。整個SFC的響應(yīng)式邏輯可以總結(jié)成一句話數(shù)據(jù)變了引用這個數(shù)據(jù)的模板片段自動更新。你不需要手動操作DOM也不需要考慮什么時候該更新框架在背后用依賴收集和虛擬DOM幫你打點好了一切。3. 工程化進階組件化、路由與狀態(tài)管理3.1 組件化開發(fā)的拆法與通信等你能用Vue寫出一個完整頁面下一步就是考慮怎么把它拆成組件。組件化的核心原則是“高內(nèi)聚、低耦合”翻譯成人話就是一個組件只做一件明確的事對外暴露的接口盡量少。舉個場景一個后臺管理系統(tǒng)的用戶表格如果你把所有代碼都堆在一個頁面里很快就會膨脹到幾千行后期維護直接崩潰。正確做法是拆成UserTable.vue負責表格展示、UserForm.vue負責新增/編輯表單、Pagination.vue負責分頁跳轉(zhuǎn)頁面組件只負責組合調(diào)度它們。組件之間的通信方式有幾種按使用頻率排序props與emits父組件通過props向子組件傳數(shù)據(jù)子組件通過emits向父組件派發(fā)事件。這是最基本的數(shù)據(jù)流。provide/inject跨多層組件傳數(shù)據(jù)用比如全局主題色配置不用一層一層透過中間組件轉(zhuǎn)發(fā)。slot插槽把子組件內(nèi)部的位置留出來讓父組件決定填充什么內(nèi)容適合做容器類組件。Pinia共享狀態(tài)多個非父子組件之間共享數(shù)據(jù)比如用戶登錄信息。這里有一個實戰(zhàn)中的常見反問到底什么時候該用Pinia我的標準很簡單如果數(shù)據(jù)只在一個組件內(nèi)部使用老老實實寫ref如果兩個以上的組件需要共用且通信路徑很深再引入Pinia。過早引入狀態(tài)管理只會讓代碼多一層不必要的復(fù)雜度。這也是漸進式框架在工程實踐上最直接的體現(xiàn)。3.2 路由與狀態(tài)管理Vue Router與Pinia多頁面應(yīng)用離不開路由。Vue Router的用法我已經(jīng)寫過很多次這里把關(guān)鍵配置貼出來import { createRouter, createWebHistory } from vue-router import HomeView from ../views/HomeView.vue const router createRouter({ history: createWebHistory(), routes: [ { path: /, component: HomeView }, { path: /about, component: () import(../views/AboutView.vue) } ] }) export default router重點注意兩點。第一createWebHistory是HTML5的History模式URL里不會出現(xiàn)#視覺上更清爽但部署時服務(wù)器要做好路徑回退配置否則刷新二級頁面會404。第二非首屏組件用動態(tài)導(dǎo)入() import(...)實現(xiàn)路由懶加載框架會自動把它拆成獨立分塊首屏加載體積能明顯變小。路由守衛(wèi)也是實際業(yè)務(wù)里的硬需求比如只有登錄后才能訪問某個頁面。在路由配置后加一個beforeEach全局前置守衛(wèi)檢查本地存儲里的登錄狀態(tài)沒登錄就redirect到登錄頁幾行代碼就能完成權(quán)限控制。狀態(tài)管理方面現(xiàn)在Vue官推的是Pinia相比Vuex最大的變化是刪除掉了mutations和getters的繁瑣概念直接寫在store里即可。一個簡單的計數(shù)器Store長這樣import { defineStore } from pinia export const useCounterStore defineStore(counter, { state: () ({ count: 0 }), actions: { increment() { this.count } } })看到區(qū)別了嗎在Pinia里修改狀態(tài)的actions直接寫在Store對象里不需要像Vuex那樣再多寫一層mutations。TypeScript類型推導(dǎo)也更順暢代碼量和心智負擔都小了不止一個檔次。從我自己的遷移經(jīng)歷看從Vuex換成Pinia幾乎是無痛遷移收益卻立竿見影。4. 生態(tài)協(xié)奏Element Plus與Vue DevTools實戰(zhàn)4.1 組件庫選型Element Plus還是Element UI說Vue生態(tài)強繞不開組件庫。Element UI和Element Plus傻傻分不清是每個Vue新手都會踩的坑。這倆不是版本升級那么簡單而是適配不同Vue版本的獨立項目Element UI對應(yīng)Vue 2系列2.6以下Element Plus對應(yīng)Vue 3系列。項目里如果用的是Vue3卻安裝了Element UI主頁能渲染出來但表格、彈窗等組件運行時會報一堆樣式錯亂和依賴缺失。對多數(shù)后臺管理系統(tǒng)來說Element Plus是主流選擇組件全、API穩(wěn)定、有完整中英文文檔。安裝和全量引入一行代碼搞定pnpm add element-plus// main.js import ElementPlus from element-plus import element-plus/dist/index.css app.use(ElementPlus)不過我要敲個重點全量引入Element Plus會讓打包體積增大不少十幾萬用戶的項目光是這三個庫的包就能多出一兩百KB。進階玩法是用unplugin-auto-import和unplugin-vue-components插件實現(xiàn)按需自動導(dǎo)入配合Vite配置哪個組件用到了就打包哪個體積能優(yōu)化近一半。這個優(yōu)化同時還會讓Element Plus的樣式自動被注入不需要手動引用CSS。實際寫業(yè)務(wù)時Element Plus最值錢的是表格和表單組件的組合玩法。表格支持自定義列、分頁、排序、多選表單驗證用rules屬性比如“用戶名必填且至少6位”這樣的規(guī)則配置后提交時自動幫你校驗不用手寫一堆正則判斷邏輯。4.2 Vue DevTools打不開的排查實錄熱詞里有個搜索頻率很高的問題“vue.js devtools (v5)插件為什么打不開了”。這個我太有發(fā)言權(quán)了因為我自己和身邊同事都在Chrome里遇過好幾次。先給結(jié)論絕大多數(shù)打不開都集中在下面這幾個原因現(xiàn)象最常見原因解決辦法插件圖標亮但面板空白使用了舊版DevTools只支持Vue2更新到V5或按項目Vue版本選對應(yīng)插件本地開發(fā)項目檢測不到production模式被誤開檢查vite.config.js確認開發(fā)環(huán)境處于development顯示“page not detected”瀏覽器擴展權(quán)限被重置進擴展管理頁重新允許訪問該站點插件圖標灰了頁面沒運行Vue或版本過新確認框架版本與插件版本兼容排查邏輯其實很簡單先在地址欄訪問 chrome://extensions/確認Vue DevTools插件處于“已啟用”狀態(tài)然后點“詳細信息”查看“網(wǎng)站訪問權(quán)限”是否包含你正在調(diào)試的域名常用的是localhost和127.0.0.1。接下來打開目標頁面右鍵選擇“檢查”打開DevTools找到Vue標簽頁。如果還是打不開就試試插件面板里的“重新加載”按鈕。還有一個很多人踩過的坑瀏覽器商店里存在大量假冒的“Vue Devtools”擴展名字只差一兩個字母裝上以后不僅不干活還可能竊取頁面數(shù)據(jù)。認準官方發(fā)布者“vuejs”的擴展別裝錯了。V5版本的DevTools還支持脫離瀏覽器窗口獨立打開調(diào)試面板適合多屏開發(fā)場景在插件設(shè)置里勾選“彈出面板”即可。5. 高頻面試題背后的Vue.js知識體系5.1 前端開發(fā)面試題里的高頻考點熱詞里有“前端開發(fā)工程師面試題”說明很多人是帶著準備面試的目的來搜Vue的。把近兩年的面試題匯總一下發(fā)現(xiàn)Vue相關(guān)的考察點高度集中在下面這幾塊考察方向高頻問題核心能力生命周期created和mounted有什么區(qū)別是否理解掛載階段和異步請求時機響應(yīng)式Vue3響應(yīng)式是怎么實現(xiàn)的是否能講清Proxy和Reflect模板渲染v-if和v-show怎么選是否理解條件渲染的性能差異組件通信父傳子、子傳父怎么寫是否掌握props/emits和provide/inject性能優(yōu)化列表為什么需要key是否理解diff算法的復(fù)用邏輯異步更新nextTick是干什么的是否理解DOM更新是異步批量的先說v-if和v-show這個看似簡單的問題。v-if是真正的條件渲染條件為假時組件連DOM都不會掛載適合切換頻率低、初始渲染成本高的場景v-show只是切換CSS的display屬性組件始終存在適合高頻切換。最優(yōu)選擇取決于組件掛卸載的成本和切換頻率這就是典型的“知其然更知其所以然”。再說key。列表渲染時給每一行加一個穩(wěn)定的key本質(zhì)上是告訴虛擬DOM“這一行代表的是這條數(shù)據(jù)”而不是“這個位置的DOM”。加了key之后數(shù)據(jù)順序變化時Vue能精確地移動、更新對應(yīng)的DOM節(jié)點而不是把所有節(jié)點全部銷毀重建。這也是面試官區(qū)分你有沒有真正上手寫過大型列表的試金石。5.2 從一個響應(yīng)式原理題拆解Vue設(shè)計思路面試里“說說Vue3的響應(yīng)式原理”幾乎是必考題。Vue2用的Object.defineProperty只能攔截對象的屬性讀寫對新增和刪除屬性就束手無策所以Vue2提供了Vue.set和Vue.delete這種補救API。Vue3換成Proxy之后直接攔截整個對象的讀寫、刪除、遍歷等操作天然支持新增屬性和動態(tài)key這也成了不少面試官考察候選人是否跟進框架迭代的點。一個比較聰明的回答路徑是先講“數(shù)據(jù)驅(qū)動視圖”的理念再講依賴收集和觸發(fā)更新的閉環(huán)最后落到Proxy的優(yōu)勢對比。依賴收集可以這樣理解數(shù)據(jù)就像寫文章需要用的素材頁面哪塊用到這個數(shù)據(jù)素材箱就會給那塊記一筆賬。數(shù)據(jù)變化時Vue按賬單挨個通知相關(guān)組件去更新沒用到該數(shù)據(jù)的組件完全不受影響。這套機制配合虛擬DOM才讓前端從“手動操縱DOM”順利過渡到了“聲明式更新”。我面試候選人的另一個高頻追問是“computed加緩存和普通方法有什么區(qū)別”。用computed定義的派生數(shù)據(jù)會緩存計算結(jié)果只有它依賴的響應(yīng)式數(shù)據(jù)變化時才會重新計算而普通方法在模板里調(diào)用一次就會執(zhí)行一次。在復(fù)雜計算的列表過濾場景比如幾千條記錄的搜索過濾用computed的緩存優(yōu)勢特別明顯。6. 常見問題與實戰(zhàn)避坑記錄6.1 開發(fā)中繞不開的幾個坑和處理方案寫Vue寫久了有些坑幾乎人人都會踩一次。第一類坑是響應(yīng)式丟失常見場景是給reactive定義的對象直接“覆蓋”了一個新對象或者給數(shù)組某個索引賦值結(jié)果視圖不更新。Vue3對reactive能劫持嵌套對象但直接替換整個對象變量時本質(zhì)上已經(jīng)丟失了原先的代理。辦法很簡單能拆解的就用ref聲明無法避免的用Object.assign把新屬性合并到原對象里。第二類坑是路由重復(fù)跳轉(zhuǎn)報錯比如在/about頁面點按鈕跳到/about控制臺會提示“Avoided redundant navigation”。嚴格來說這只是個警告不影響功能但測試時會讓人疑神疑鬼。規(guī)范做法是在Vue Router 4里給push方法包裹一次重寫或者判斷當前路由不同時再執(zhí)行跳轉(zhuǎn)。第三類坑是真·防不勝防的樣式作用域。給子組件寫樣式時加了scoped屬性卻怎么都不生效尤其涉及第三方UI組件時很常見。scoped只給當前組件的元素添加>