很多前端初學者在決定學習 Vue3 時第一反應是去 B 站搜教程。結果搜出來的內容“一半是 Vue2 老視頻一半是只講某個功能點的碎片化分享”真正能讓人從零開始、系統走完整個學習路徑的資料并不多。最近有一類標題特別吸引眼球“全 100 集”“一周從入門到精通”“學完即可就業”。很多人點進去的動機是“一周速成”但我想先給一個判斷這套教程真正的價值不在于“一周精通”這個承諾而在于它用 100 集的體量把 Vue3 的學習路徑完整地鋪開了。零基礎學 Vue3 最怕的不是資料少而是資料散今天看一個響應式原理明天看一個組件通信到真正寫項目時才發現腦子里全是碎片。這篇文章會圍繞 Vue3 的學習路徑展開幫你拆解一套完整的零基礎 Vue3 教程應該包含哪些模塊每個模塊學完之后你應該能做什么哪些知識點是面試高頻點哪些坑是學習過程中一定會遇到的。如果你正準備學 Vue3或者已經在學習但總覺得“學完就忘”這篇文章值得收藏。1. 零基礎學 Vue3 最常見的幾個誤區先聊聊誤區因為很多人的學習節奏一開始就跑偏了。第一個誤區是過度糾結版本。還在看 Vue2 的教程學了一半發現公司要的是 Vue3或者打開視頻發現講的是 Options API但 Vue3 生態里大家都在寫 Composition API于是開始懷疑自己學錯了方向。Vue2 到 Vue3 不是小修小補響應式原理、組合式邏輯復用、模板編譯都發生了明顯變化老教程里的很多寫法在 Vue3 項目里并不推薦。第二個誤區是只看不寫。瀏覽器里打開別人的項目 demo覺得自己看懂了關上視頻自己寫一個頁面就卡在ref和reactive怎么分配上。Vue3 的難點不在語法本身而在于把數據流、響應式依賴、生命周期這些概念串起來。看 10 遍不如自己寫一遍。第三個誤區是跳過工程化基礎。有同學剛學會創建項目就直接跳到組件通信、動態路由結果連 Vite 的配置文件、npm腳本命令、node_modules安裝失敗這類基礎問題都處理不了。前端開發到今天已經不是“寫一個 HTML 文件”那么簡單工程化基礎是 Vue3 學習的前置條件。第四個誤區是貪多嚼不爛。看到 100 集的標題有人覺得“太多了”有人覺得“太好了全都要”于是從第 1 集開始逐集看3 天之后停在第二十章然后放棄。這套教程真正合理的用法不是“全部看完”而是把它當作學習地圖基礎部分認真跟練項目實戰部分重點突破已經懂的知識點直接跳過。回到那個核心問題這套教程適合誰我的判斷是它適合三類人——完全沒有接觸過前端框架的純新人、以前寫過 Vue2 但想遷移到 Vue3 的開發者、以及即將參加前端面試但 Vue3 知識不成體系的求職者。三者對教程的使用方式完全不同后面會展開講。2. Vue3 為什么值得學與 Vue2 的核心差異在開始學習之前先建立一個大背景Vue3 到底解決了 Vue2 的什么問題這個問題不僅是學習動機的來源也是面試必考點。2.1 響應式系統的重構Vue2 的響應式基于Object.defineProperty它的一個明顯限制是新增屬性、刪除屬性、通過下標修改數組元素都不能被自動偵測。開發者經常要調用Vue.set或this.$set手動處理。Vue3 改用 ES6 的Proxy可以攔截對象屬性的讀取、賦值、刪除、遍歷等操作新增屬性和數組操作都能被響應式系統捕獲。這次的改動是原理層面的所以“Vue3 為什么比 Vue2 響應式更強”會成為高頻面試題。2.2 組合式 API 與邏輯復用Vue2 時代邏輯復用主要靠mixins但mixins有個讓人頭疼的問題多個mixins混入同一個組件后數據來源不清晰命名可能沖突邏輯被分散在不同部分。Vue3 的 Composition API 讓同一個業務邏輯的相關代碼可以組織在一起用setup函數或script setup語法把它們寫在一塊再封裝成自定義 hook。這個變化不在表面的語法層面而在代碼組織方式上。2.3 性能與包體積Vue3 的響應式代理、靜態樹提升、事件緩存等編譯優化手段讓它在組件更新時的性能表現比 Vue2 更好。同時Vue3 支持 tree-shaking核心運行時按需引入項目包體積更可控。2.4 工程生態的變化構建工具已經從 Webpack 主流切換到 Vite 主流。Vite 在開發環境下基于原生 ES Module冷啟動速度和處理效率比傳統打包工具高很多。學習 Vue3 時繞不開 Vite 的環境配置。一句話總結這部分的要點Vue3 的變化不是把 Vue2 換個皮膚而是從響應式內核到開發體驗、到生態工具鏈的一次整體升級。學 Vue3 不等于學 Vue2 加一點新語法很多底層認知要重建。3. Vue3 基礎概念與核心原理在動手之前先把幾個最容易讓新人困惑的概念講清楚。這部分不需要背原理但需要建立正確的直覺。3.1 組合式 APIComposition APIVue3 仍然支持 Options API也就是 Vue2 里data、methods、computed、watch分塊寫的模式。但 Vue3 推薦的寫法是 Composition API把所有與某個業務邏輯相關的響應式數據、計算屬性、監聽器放在一起。在 Vue3 項目中更常見的寫法是script setup它讓代碼更簡潔template div p{{ count }}/p button clickincrement加一/button /div /template script setup import { ref } from vue const count ref(0) function increment() { count.value } /scriptscript setup中定義的變量和函數可以直接在模板中使用不需要return。這個寫法在大多數 Vue3 項目和 Vue3 面試題里都會出現。3.2 ref 與 reactive響應式數據的兩種聲明方式ref和reactive是 Vue3 里高頻的響應式 API很多人一開始分不清它們的區別。ref主要用于包裝基本類型值也可以接收對象但在 JavaScript 中訪問時需要加.value模板中會自動解包所以模板里不用寫.valueimport { ref } from vue const name ref(張三) const user ref({ age: 18 }) console.log(name.value) // 張三 console.log(user.value.age) // 18reactive只能接收對象包括數組和Map、Set等訪問屬性時直接使用不需要.valueimport { reactive } from vue const state reactive({ count: 0, list: [1, 2, 3] }) state.count state.list.push(4)實際項目中如何選擇這不是死規則但一個比較容易理解的策略是場景推薦方式原因基本類型值如字符串、數字、布爾值ref響應式包裝基本類型的天然方式對象嵌套層級深整體狀態復雜reactive訪問時不需要.value代碼更簡潔組合式函數中返回響應式數據ref不容易丟失響應式更加靈活需要替換整個對象內容ref使用value 新對象更方便很多 Vue3 面試提問“ref 和 reactive 的區別”回答的核心包括數據類型、訪問方式、響應式原理、解構后是否丟失響應性。3.3 computed 與 watch派發與副作用computed用于根據已有數據派生出新數據它有緩存特性只有依賴變化時才會重新計算import { ref, computed } from vue const price ref(100) const quantity ref(2) const total computed(() price.value * quantity.value)watch用于偵測數據變化并執行副作用比如請求接口、寫本地緩存、更新 DOM 以外的狀態import { ref, watch } from vue const keyword ref() watch(keyword, (newValue, oldValue) { console.log(關鍵詞從 ${oldValue} 變成了 ${newValue}) })這里有一個容易出錯的地方computed內部不能有副作用比如修改別的響應式數據、發起異步請求都不應該出現在computed里。這是 Vue3 面試中經常出現的小陷阱。3.4 生命周期函數的變化Vue2 里的beforeCreate、created、beforeMount、mounted等生命周期在 Vue3 組合式 API 中有對應寫法比如onMounted、onUpdated、onUnmountedimport { onMounted, onUnmounted } from vue onMounted(() { console.log(組件掛載完成) }) onUnmounted(() { console.log(組件卸載) })新手容易把onMounted寫成mounted在script setup中這是無效的必須引入對應的生命周期函數。4. 環境準備從零創建第一個 Vue3 項目一套 100 集的零基礎教程前面的內容一定是從環境搭建開始講起。這部分的價值不是“能跑起來”而是解決工程化基礎問題。4.1 安裝 Node.jsVue3 項目依賴 Node.js 環境。安裝完成后可以在命令行中驗證node -v npm -v版本請以實際項目要求為準。如果安裝后npm命令不可用需要檢查系統環境變量中是否已經添加 Node.js 安裝目錄。這里有一個常見問題在 Windows 上安裝 Node.js 后新版本通常會提示“自動添加到 PATH”但如果當時忽略了這一步就需要手動配置環境變量。4.2 使用 Vite 創建項目Vite 是 Vue3 官方推薦的構建工具。創建項目的命令在 Vue 官方文檔中使用頻率最高的是npm create vuelatest這個命令會創建一個基于 Vite 的 Vue3 項目過程中會詢問是否安裝 Vue Router、Pinia、ESLint 等插件。如果你是零基礎建議先選擇默認選項把基礎項目跑通再逐步添加功能。輸入命令后進入項目目錄并安裝依賴cd vue-project npm install如果npm install速度慢可以切換鏡像源但這一步需要根據實際網絡環境判斷不能在文章中寫死。4.3 項目目錄結構創建完成的 Vue3 項目通常包含這些關鍵目錄和文件路徑作用src/main.js應用入口文件負責創建應用實例src/App.vue根組件src/components/子組件目錄src/router/路由配置目錄src/views/頁面級組件目錄src/stores/Pinia 狀態管理目錄vite.config.jsVite 配置文件package.json項目依賴與腳本管理4.4 運行項目在終端中執行npm run dev看到Local: http://localhost:5173/類似的輸出后瀏覽器訪問該地址即可看到 Vue 項目頁面。端口號以實際輸出為準有的項目會默認使用 5173如果被占用可能會跳到其他端口。這一步學完后你應該能回答的問題Vite 和 Webpack 有什么區別main.js里createApp(App).mount(#app)做了什么為什么npm run dev和npm run build執行的是不同的腳本如何在vite.config.js中配置開發服務器端口5. 100 集教程的核心知識地圖從入門到項目實戰這部分是對一套完整 Vue3 零基礎教程的知識點拆解。你會看到一套合格的教程大概會把 100 集合里的內容分成哪幾個階段每個階段結束后你應當具備什么能力。學習時可以把它當作檢查單也可以用來規劃自己的節奏。第一階段Vue3 基礎語法與模板指令這一階段通常對應教程最前面的 20 集左右核心內容是對模板語法和數據綁定建立直覺插值表達式、v-bind、v-onv-if與v-show的區別v-for列表渲染以及為什么需要key事件處理、表單輸入綁定v-model模板中的表達式和計算屬性邊界學完這個階段你必須能夠用 Vue3 寫出一個純前端的交互頁面比如待辦列表、購物車數量加減。可能遇到的問題v-model修改了對象里不存在的屬性頁面為什么不更新v-for里同時使用index作為key有什么隱患這兩個問題都會在后續響應式原理部分得到解答。第二階段組件化開發組件是 Vue 的核心抽象。這個階段會圍繞以下幾點展開組件注冊與引用props傳入數據emit拋出事件插槽slot與具名插槽組件樣式隔離scoped組件 v-model 的用法動態組件component :is...這是從“寫頁面”到“搭應用”的分水嶺。學完這個階段你需要能獨立把一個頁面拆成多個組件并梳理出它們之間的數據流關系。第三階段Composition API 進階與邏輯復用新人在這個階段最容易出現“看不懂別人代碼”的情況。核心內容包括setup函數與script setup語法ref、reactive、computed、watch、watchEffectprovide與inject跨層傳值自定義 Hook組合式函數封裝這個階段要刻意養成“把同一業務邏輯代碼放在一起”的思維方式。比如一個用戶登錄邏輯它的響應式變量和登錄方法應該封裝在同一個自定義 Hook 中而不是散落在多個methods里。第四階段Vue Router 路由所有后臺管理系統都離不開路由。這個階段通常包含路由的基本配置與嵌套路由命名路由與編程式導航動態路由參數與路由傳參路由守衛全局守衛、路由獨享守衛、組件內守衛動態路由和權限控制動態路由在后臺管理系統中尤其重要因為不同角色的用戶可訪問的頁面不同。常見的做法是登錄后獲取用戶權限再通過router.addRoute動態添加路由表。第五階段Pinia 狀態管理Vuex 仍然是面試中會提及的舊知識但新項目里更推薦 Pinia。核心內容Store 的定義與使用state、getters、actions在組件中使用 StoreStore 的模塊化拆分持久化方案第六階段前后端交互與綜合項目實戰學習框架的最終落腳點是能寫出完整業務頁面。這個階段會涉及使用axios或fetch請求后端接口請求攔截器與響應攔截器登錄流程與 Token 存儲動態路由與權限菜單后臺管理系統的用戶、角色、菜單管理綜合項目電商商城、后臺管理系統、內容管理平臺等如果你學完了基礎和進階部分卻不能獨立完成一個后臺管理系統的登錄 權限 列表 表單流程說明知識還沒有被串成體系。6. 組件通信、路由與狀態管理實戰示例這一節提供一個最小但完整的實戰示例把剛才提到的幾個知識點串在一起組件通信、路由跳轉、Pinia 狀態管理。6.1 組件通信props 和 emit父子組件通信是最基礎的場景。父組件通過props向下傳數據子組件通過emit向上拋事件。父組件代碼src/views/ParentView.vuetemplate div h3父組件/h3 p當前計數{{ count }}/p ChildComponent :countcount update:countcount $event / /div /template script setup import { ref } from vue import ChildComponent from /components/ChildComponent.vue const count ref(0) /script子組件代碼src/components/ChildComponent.vuetemplate div p子組件接收到的計數{{ count }}/p button clickhandleIncrement通知父組件加一/button /div /template script setup import { defineProps, defineEmits } from vue const props defineProps({ count: { type: Number, default: 0 } }) const emit defineEmits([update:count]) function handleIncrement() { emit(update:count, props.count 1) } /script這個邏輯也可以用v-model:count語法簡化但在學習階段手動寫props和emit更能理解數據流向。6.2 Vue Router 基本配置src/router/index.js中配置路由表import { createRouter, createWebHistory } from vue-router import HomeView from /views/HomeView.vue const router createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: /, name: home, component: HomeView }, { path: /about, name: about, component: () import(/views/AboutView.vue) } ] }) export default router其中() import(...)是路由懶加載寫法按需加載組件減少首屏請求體積。在后臺管理系統中這條寫法非常常見。6.3 Pinia 狀態管理src/stores/counter.jsimport { defineStore } from pinia import { ref } from vue export const useCounterStore defineStore(counter, () { const count ref(0) function increment() { count.value } return { count, increment } })在組件中使用script setup import { useCounterStore } from /stores/counter const counter useCounterStore() /script template div p{{ counter.count }}/p button clickcounter.increment加一/button /div /templatePinia 的定義支持選項式和組合式兩種寫法。上面的組合式寫法更貼近 Vue3 Composition API 風格也更清晰。7. 從學習到面試與就業高頻 Vue3 面試知識點很多人的學習目標不只是“能寫頁面”還要能通過面試。一套合格的 Vue3 教程在講完各個模塊后通常會穿插面試環節的常見考點。這里根據前端面試熱詞和 Vue 生態常見問題梳理面試官經常追問的知識點。7.1 ref 與 reactive 的區別這個問題看似基礎但面試官會繼續追問對象被reactive包裹后解構出來的屬性還有響應性嗎ref接收對象時底層是使用reactive還是Object.defineProperty如果答到“ref內部處理對象時會調用reactive來轉換”就已經超越了很多候選人。另一個更深的問題為什么reactive解構后響應式丟失因為解構后拿到的屬性是原始值引用Proxy的攔截只對訪問代理對象的屬性生效解構出來的值已經脫離了代理對象。解決方案是使用toRefs或toRef。7.2 computed 與 watch 的區別高頻考點包括computed有緩存watch沒有緩存。computed是響應式依賴被修改后重新計算watch是偵測到數據變化后執行回調。computed里的函數不能有副作用。watch默認不執行設置immediate: true可以立即執行。watch監聽深層對象時需要設置deep: true。7.3 Vue3 強制更新有熱詞問到“vue3 強制更新”。在 Vue3 中一般不需要強制更新因為響應式系統會自動追蹤依賴。但如果因特殊原因需要強制重新渲染有幾種常見思路使用reactive或ref的重新賦值。通過增加:key來讓組件重新渲染。使用nextTick等待 DOM 更新后再操作。需要注意強制更新在項目中應該是罕見操作如果頻繁遇到很可能說明狀態設計有問題。7.4 路由跳轉后頁面不刷新有熱詞提到“vue3路由跳轉不刷新頁面”。這是個典型的 Vue Router 使用困惑同一組件復用時組件不會重新掛載。如果 A 頁面跳到 B 頁面B 頁面又回到 A 頁面而 A 組件已經實例化過數據可能還是舊的。解決方案包括在watch中監聽route對象變化重新加載數據。使用onActivated配合keep-alive。如果業務要求每次進入頁面都刷新可以用key強制重新渲染組件。7.5 Vue3 動態路由與權限后臺管理系統面試題中“動態路由如何實現”幾乎是必問用戶登錄后后端返回該用戶的角色和權限標識。前端維護一張路由表例如一個asyncRoutes數組。根據權限過濾出用戶可訪問的路由調用router.addRoute動態加入。頁面刷新后重新恢復路由否則刷新會跳到 404。這個流程涉及 Vue Router、Pinia、后端接口協同是一個很好考察綜合能力的例子。7.6 組件庫相關熱詞里有大量“組件庫”相關搜索。Vue3 項目常用組件庫包括 Element Plus、Ant Design Vue、Naive UI、Vuetify 等。在面試中常被問有沒有用過 Element Plus 的表格、表單、彈窗如何自定義組件庫的主題如何修改組件庫內部樣式例如 tabs 標簽頁樣式修改第三方組件內部樣式通常會用deep選擇器。Vue3 中推薦寫法是:deep()可以篩選到自己需要的層級。8. 學習過程中的常見問題與排查方案這一節把零基礎學習者最常遇到的問題整理成表方便檢索。問題現象可能原因排查方式解決方案npm run dev后瀏覽器訪問頁面空白路由模式、入口文件、模板語法錯誤打開瀏覽器控制臺看報錯根據報錯定位組件或路由檢查main.js是否正確掛載響應式數據更新但頁面不刷新直接給reactive對象新增屬性但沒有通過賦值方式觸發更新在控制臺查看是否使用Proxy代理對象正確聲明初始屬性或使用Object.assign重新賦值模板中ref變量可用但 JS 中訪問沒有value寫法不一致檢查是否在模板外直接使用ref變量JS 中訪問必須寫.value模板中自動解包import組件后頁面不渲染組件路徑錯誤或組件名引用不一致查看控制臺打印的警告檢查import路徑和文件名大小寫修改組件庫樣式不生效組件樣式被scoped隔離查看瀏覽器元素樣式是否被覆蓋使用:deep()穿透到組件內部樣式路由跳轉后頁面數據是舊的組件被復用未重新加載數據在組件內打印生命周期鉤子監聽route變化或使用key強制重掛載npm install很慢或安裝失敗網絡原因或鏡像源問題檢查 npm 日志更換鏡像源但需以實際網絡環境和團隊規范為準動態權限路由刷新后 404路由表在刷新后丟失刷新后查看 Pinia 中是否還有權限數據在入口文件或路由守衛中重新拉取權限并動態添加路由這里想強調一個觀念排查問題不是看運氣而是需要一條固定的思路——先看控制臺報錯再定位組件或配置最后查文檔或搜索。大部分 Vue3 初學者的報錯都能在瀏覽器 DevTools 的 Console 面板中找到線索。9. 最佳實踐與工程級建議當你能獨立跑通一個小項目后需要從“能運行”向“工程規范”邁進。以下建議來自 Vue3 項目開發中的普遍經驗。9.1 目錄結構與命名規范推薦按業務模塊組織組件和頁面src/ api/ // 接口請求封裝 assets/ // 靜態資源 components/ // 公共組件 composables/ // 組合式函數 layouts/ // 布局組件 router/ // 路由配置 stores/ // Pinia store styles/ // 全局樣式 utils/ // 工具函數 views/ // 頁面組件組件文件名建議使用大駝峰UserCard.vue頁面路由組件放在views目錄下并保持路徑清晰。9.2 請求層封裝學習階段可以直接在組件中調用axios但進入項目階段后建議把請求邏輯統一封裝到api模塊中。將請求地址、請求方法、攔截器、錯誤處理集中管理避免多個組件各寫各的請求邏輯。一個比較典型的做法是在請求封裝中統一處理 Token 寫入和 401 跳轉邏輯業務組件中只關心成功后的數據。9.3 狀態管理使用邊界不是所有數據都應該放進 Pinia。組件內部自己使用的狀態直接在組件中用ref管理多個組件共享的、頁面刷新后需要保留的、涉及登錄權限的數據才適合放進 Store。如果什么東西都往 Store 里塞項目狀態會變得很難維護。9.4 性能優化Vue3 項目中的性能優化可以從幾個層面考慮路由懶加載把頁面級組件使用動態import。長列表使用v-memo但需要判斷適用性。減少不必要的響應式數據對于不需要響應的常量不要用ref包裹。大型組件庫按需引入避免全部引入導致包體積過大。組件庫樣式和全局樣式的優先級沖突要提前約定。9.5 國際化與工程配置很多后臺管理系統需要支持多語言。Vue3 項目通常使用 Vue I18n 實現國際化將文案抽離為語言包文件然后根據用戶語言設置動態切換。國際化并不是簡單替換文字還涉及日期格式、貨幣格式、目錄命名等細節。9.6 動態路由的權限設計動態路由是后臺管理系統繞不開的話題。建議流程是登錄成功后保存 Token。在路由守衛中判斷是否登錄。根據用戶權限標識過濾出可訪問路由。使用router.addRoute動態注冊。刷新頁面時重新獲取用戶信息和權限。這個流程要配合后端接口設計不同項目的字段結構和權限模型不同需要根據實際需求調整。10. 關于學習節奏的最后建議回到標題所說的“一周從入門到精通”。作為學習規劃這個時間線對零基礎來說過于緊湊但我也不建議用“三個月才能學完”來嚇退自己。更合理的思路是第 1 到 7 天完成基礎語法、組件通信、ref/reactive/computed/watch的學習每天至少手寫一個 demo。第 8 到 14 天學習 Vue Router、Pinia、登錄流程和動態路由開始搭建后臺管理系統。第 15 到 21 天完成一個綜合項目把組件、路由、狀態管理、接口請求全部串起來。第 22 到 30 天對照面試高頻題查漏補缺整理自己的項目亮點。這套 100 集教程最大的價值是讓初學者不用再自己拼湊學習地圖。第 1 到 20 集打基礎21 到 50 集進入組件和進階用法50 到 80 集通常是路由、狀態管理、前后端交互最后 20 集往往是完整的項目實戰。具體集數與內容劃分以視頻實際目錄為準但這個學習階段的劃分方式適用于幾乎所有 Vue3 系統教程。學習中真正影響成敗的不是看了多少集而是每一階段結束時是否產出了自己的作品。遇到不懂的知識點優先看控制臺報錯和官方文檔遇到項目中的復雜需求先拆解成組件和數據流再動手寫代碼。這套方法不僅適用于 Vue3也適用于整個前端學習過程。