學(xué)習(xí)路線：從組合式API到項目實戰(zhàn)全解析)
自學(xué) Vue3 這件事難點通常不在單個語法而在知識點太多、彼此之間又互相耦合。很多人在視頻網(wǎng)站上看到的 Vue3 全套教程標(biāo)題寫著“零基礎(chǔ)”“從入門到精通”“學(xué)完即可就業(yè)”。這類說法帶有明顯的宣傳成分真正決定學(xué)習(xí)效果的是課程有沒有覆蓋完整的知識鏈條以及你練習(xí)時有沒有形成閉環(huán)。對于零基礎(chǔ)或剛從 Vue2 轉(zhuǎn)過來的開發(fā)者來說與其糾結(jié)“看哪一套視頻”不如先搞清楚一套合格教程應(yīng)該包含哪些模塊再按模塊去學(xué)、去練、去排查、去沉淀。這篇文章就以一套典型的 100 集 Vue3 教程為參考拆解它的知識結(jié)構(gòu)同時把零基礎(chǔ)最容易踩的坑、最需要理解的原理、最應(yīng)該動手練的案例講清楚。學(xué)完之后你能得到一張 Vue3 的學(xué)習(xí)地圖、一套可復(fù)現(xiàn)的工程搭建流程、一組高頻面試題的回答思路以及一份可以直接拿去用的項目檢查清單。1. 先弄清 Vue3 這套學(xué)習(xí)體系到底覆蓋了什么1.1 Vue3 解決什么問題和 Vue2 的核心差異Vue3 是 Vue.js 的下一個大版本。它在 Vue2 的基礎(chǔ)上重寫了響應(yīng)式系統(tǒng)引入了組合式 API并大幅提升了 TypeScript 支持。理解 Vue3不能只把它當(dāng)成“升級版的 Vue2”而要理解它到底解決了什么具體問題。Vue2 在大型項目里存在幾個長期痛點邏輯復(fù)用依賴 mixins命名沖突和來源不清晰新增屬性需要調(diào)用Vue.set數(shù)組下標(biāo)修改無法自動響應(yīng)對 TypeScript 的支持比較勉強(qiáng)。Vue3 用 Proxy 重寫響應(yīng)式系統(tǒng)后新增屬性、數(shù)組索引修改都能被監(jiān)聽類型推導(dǎo)也順暢很多。核心差異可以用一張表概括對比點Vue2Vue3響應(yīng)式實現(xiàn)Object.defineProperty新增屬性需 Vue.setProxy支持新增屬性和數(shù)組下標(biāo)API 風(fēng)格Options API 為主Options API 和 Composition API 并存邏輯復(fù)用方式mixins命名沖突明顯composables邏輯更清晰TypeScript 支持較弱官方優(yōu)先支持全局 APIVue.component 等掛載到 Vue 構(gòu)造器createApp 返回 app 實例filter支持移除組件 v-model只能有一個支持多個 v-model 參數(shù)對零基礎(chǔ)學(xué)習(xí)者來說建議直接按 Vue3 的思維學(xué)習(xí)不要先學(xué) Vue2 再“轉(zhuǎn)” Vue3。兩者雖然模板語法相似但響應(yīng)式原理、組合式 API 的寫作方式、工程化工具鏈差異很大混著學(xué)容易造成概念混亂。1.2 一套完整零基礎(chǔ)教程應(yīng)有的知識模塊劃分100 集只是一個數(shù)量概念關(guān)鍵是內(nèi)容結(jié)構(gòu)。一套合格的零基礎(chǔ)教程至少要覆蓋下面這些模塊模塊范圍學(xué)完后能做什么環(huán)境與工具鏈Node.js、Vite、npm/pnpm、Vue Devtools創(chuàng)建并啟動 Vue3 項目基礎(chǔ)語法模板語法、指令、事件、表單綁定寫一個可交互頁面組合式 APIsetup、ref、reactive、computed、watch管理組件內(nèi)部狀態(tài)組件化props、emit、插槽、生命周期、組件通信拆分并復(fù)用組件Vue Router路由配置、懶加載、導(dǎo)航守衛(wèi)、動態(tài)路由實現(xiàn)多頁面應(yīng)用Piniastore 定義、狀態(tài)管理、持久化管理登錄態(tài)和全局?jǐn)?shù)據(jù)網(wǎng)絡(luò)請求Axios 封裝、攔截器、錯誤處理對接后端接口工程化實戰(zhàn)后臺管理系統(tǒng)、商城、組件庫、代碼規(guī)范完成一個可演示項目面試專題Vue2 與 Vue3 差異、源碼原理、常見題應(yīng)付前端面試模塊之間是遞進(jìn)關(guān)系。環(huán)境沒配好后面所有代碼都沒法運行基礎(chǔ)語法不熟寫組件通信時會反復(fù)返工路由和狀態(tài)管理沒搞懂做項目時會卡在頁面跳轉(zhuǎn)和數(shù)據(jù)共享上。1.3 學(xué)習(xí)前要有兩個心理預(yù)期第一看視頻不等于學(xué)會。真正的學(xué)習(xí)發(fā)生在你關(guān)掉視頻、獨立寫出代碼、遇到報錯并解決的那一刻。第二“一周精通”不現(xiàn)實但一周之內(nèi)完全可以掌握 Vue3 的基礎(chǔ)語法并跑通一個簡單項目。把目標(biāo)從“刷完 100 集”改成“完成 5 個最小練習(xí)”效果會好很多。注意選教程時不要只看集數(shù)要看它是否包含環(huán)境配置、實戰(zhàn)項目和排錯過程。沒有排錯過程的教程遇到問題后你仍然無從下手。2. 環(huán)境準(zhǔn)備先把 Vue3 跑起來再談?wù)Z法2.1 Node.js 和包管理器版本確認(rèn)Vue3 的工程化依賴 Node.js 和包管理器。版本不對后面安裝依賴時會報一堆看不懂的錯。打開終端先檢查當(dāng)前版本node -v npm -v推薦使用 Node.js 18 或更高版本因為 Vite 5 要求 Node 18。如果版本過低建議去 Node 官網(wǎng)下載 LTS 版本或者使用 Node 版本管理工具切換。包管理器方面Vue3 項目可以使用 npm、pnpm 或 yarn。這里推薦 pnpm原因有兩個安裝速度更快磁盤占用更小。首次使用需要先安裝npm install -g pnpm pnpm -v零基礎(chǔ)階段不必糾結(jié)用哪個先選定一個保持一致。2.2 用 Vite 創(chuàng)建第一個 Vue3 項目Vite 是 Vue3 官方推薦的構(gòu)建工具。相比 Webpack開發(fā)環(huán)境的冷啟動速度更快配置也更簡潔。創(chuàng)建項目npm create vitelatest vue3-demo -- --template vue命令執(zhí)行后會生成一個名為 vue3-demo 的目錄然后進(jìn)入目錄安裝依賴并啟動開發(fā)服務(wù)器cd vue3-demo npm install npm run dev終端會出現(xiàn)一個本地地址例如http://localhost:5173瀏覽器打開后能看到 Vue3 的默認(rèn)頁面說明第一個項目已經(jīng)跑通了。也可以使用官方提供的create-vue腳手架它會在創(chuàng)建過程中詢問是否安裝 Vue Router、Pinia、ESLint 等適合做完整項目時使用npm create vuelatest兩者的區(qū)別在于create-vite更輕量適合起步create-vue更完整適合從零搭建一個工程化項目。2.3 項目目錄結(jié)構(gòu)和啟動流程新建項目后核心目錄結(jié)構(gòu)如下vue3-demo ├── index.html ├── package.json ├── vite.config.js ├── public/ └── src/ ├── main.js ├── App.vue ├── components/ └── assets/index.html是整個應(yīng)用的入口頁面。Vue3 項目里的index.html放在根目錄而不是 public 目錄這一點和 Vue2 腳手架不同。src/main.js負(fù)責(zé)創(chuàng)建應(yīng)用實例并掛載到頁面import { createApp } from vue import App from ./App.vue createApp(App).mount(#app)這段代碼做了兩件事用createApp創(chuàng)建應(yīng)用實例再用mount把根組件掛載到index.html中 id 為app的節(jié)點上。Vue3 里不再使用new Vue()這是需要記住的第一個差異化點。2.4 學(xué)習(xí)環(huán)境與生產(chǎn)環(huán)境的差異學(xué)習(xí)階段使用npm run dev啟動開發(fā)服務(wù)器代碼改動會自動熱更新。但開發(fā)服務(wù)器只適合本地調(diào)試不能直接當(dāng)作生產(chǎn)環(huán)境。生產(chǎn)環(huán)境需要先構(gòu)建產(chǎn)物npm run build npm run previewnpm run build會把項目編譯到dist目錄preview可以在本地預(yù)覽打包后的效果。實際部署時把dist目錄上傳到 Nginx 或其他靜態(tài)服務(wù)器即可。不同環(huán)境需要不同的接口地址可以通過.env文件管理# .env.development VITE_APP_TITLEvue3-demo-dev VITE_API_BASE/api-dev # .env.production VITE_APP_TITLEvue3-demo-prod VITE_API_BASE/api-prod在代碼里通過import.meta.env讀取const apiBase import.meta.env.VITE_API_BASE這里需要注意只有以VITE_開頭的變量會暴露給前端代碼其他變量不會。3. 組合式 API 是零基礎(chǔ)最容易混亂的部分3.1 setup 語法糖和 ref、reactive 的選型組合式 API 是 Vue3 最核心的變化。最簡單也最常用的寫法是script setup它讓代碼更簡潔不需要手動return變量。script setup import { ref, reactive } from vue const count ref(0) const form reactive({ name: , age: 18 }) function add() { count.value } /script template div pcount: {{ count }}/p pname: {{ form.name }}/p button clickadd1/button /div /template這段代碼里有兩個重點。ref適合基礎(chǔ)類型也可以包裹對象。在 script 中讀取或修改ref時必須通過.value模板中會自動解包不需要寫.value。reactive只能接收對象適合聲明表單、配置項這類內(nèi)部字段較多的結(jié)構(gòu)。但reactive有一個容易踩的坑如果直接整體替換對象響應(yīng)性會丟失。// 這樣寫不會更新頁面 form { name: 李四, age: 20 } // 這樣寫會更新頁面 form.name 李四 form.age 20實際項目里建議統(tǒng)一以ref為主對象狀態(tài)可以用ref包裹這樣整體賦值也方便。reactive更適合不需要整體替換、只修改內(nèi)部字段的場景。另一個常見問題是從reactive對象中解構(gòu)屬性const { name } form // name 是普通字符串修改它不會觸發(fā)頁面更新如果確實需要解構(gòu)并保持響應(yīng)性可以用toRefs。3.2 computed 的使用、依賴追蹤和錯誤用法computed用來聲明派生狀態(tài)。它的核心特點是帶緩存只有依賴的響應(yīng)式數(shù)據(jù)變化時才會重新計算。import { ref, computed } from vue const price ref(100) const count ref(2) const total computed(() price.value * count.value)模板中使用total即可不需要寫括號。和methods的區(qū)別是方法每次渲染都會執(zhí)行computed只會在依賴變化時重新計算。零基礎(chǔ)最常見的錯誤是試圖直接修改computed的返回值const fullName computed(() { return firstName.value lastName.value }) // 錯誤不會生效 fullName.value 張三 李四computed默認(rèn)是只讀的。如果確實需要支持修改應(yīng)該傳入一個帶set的對象const fullName computed({ get() { return firstName.value lastName.value }, set(val) { const parts val.split( ) firstName.value parts[0] lastName.value parts[1] } })需要注意computed的 getter 里不要寫網(wǎng)絡(luò)請求、修改其他狀態(tài)這類副作用邏輯。副作用應(yīng)該放在watch或事件處理函數(shù)中。3.3 watch 與 watchEffect 的適用場景watch用于監(jiān)聽指定數(shù)據(jù)源的變化適合在變化后執(zhí)行異步操作或處理新舊值。import { watch, ref } from vue const keyword ref() watch(keyword, (newVal, oldVal) { console.log(關(guān)鍵詞變化, oldVal, -, newVal) })監(jiān)聽reactive對象中的某個屬性時需要傳入一個 getter 函數(shù)const form reactive({ name: , age: 18 }) watch( () form.name, (val, oldVal) { console.log(val, oldVal) } )watchEffect的用法不同它會自動收集函數(shù)內(nèi)部用到的所有響應(yīng)式依賴依賴變化時自動執(zhí)行一次。import { watchEffect, ref } from vue const id ref(1) const info ref(null) watchEffect(async () { const res await fetch(/api/user/${id.value}) info.value await res.json() })watchEffect適合“根據(jù)狀態(tài)主動觸發(fā)副作用”的場景缺點是拿不到舊值。日常開發(fā)中明確需要監(jiān)聽某個數(shù)據(jù)源時優(yōu)先用watch需要自動追蹤多個依賴時用watchEffect更省事。3.4 生命周期在組合式 API 中的寫法Vue2 選項式 API 里的created、mounted等方法在 Vue3 組合式 API 中變成了帶on前綴的函數(shù)選項式寫法組合式寫法觸發(fā)時機(jī)beforeCreate / created直接在 setup 中編寫邏輯組件創(chuàng)建階段beforeMountonBeforeMount掛載前mountedonMounted掛載完成beforeUpdateonBeforeUpdate數(shù)據(jù)變化準(zhǔn)備更新 DOMupdatedonUpdatedDOM 更新完成beforeUnmountonBeforeUnmount卸載前unmountedonUnmounted卸載完成import { onMounted, onUnmounted } from vue onMounted(() { console.log(組件掛載完成) }) onUnmounted(() { console.log(組件卸載) })beforeCreate和created在script setup中可以直接理解為 setup 內(nèi)部的代碼因為 setup 本身就在創(chuàng)建階段執(zhí)行。注意組合式 API 的生命周期函數(shù)必須在 setup 執(zhí)行期間同步調(diào)用不要寫在 setTimeout 或其他異步回調(diào)里否則無法正確注冊。4. 組件通信和工程化進(jìn)階要一起學(xué)4.1 組件通信的六種方式組件化是 Vue 的核心但新手在寫業(yè)務(wù)時最容易卡在“子組件怎么把數(shù)據(jù)傳給父組件”。Vue3 中常用的通信方式有六種方式適用場景注意事項props / emit父子組件直接通信props 單向流動不能直接修改v-model表單類組件雙向綁定Vue3 支持多個 v-modelref defineExpose父組件調(diào)用子組件方法或讀取狀態(tài)子組件需要顯式暴露provide / inject跨層級組件共享數(shù)據(jù)數(shù)據(jù)不是響應(yīng)式時需額外處理mitt / EventBus非父子組件通信需要手動銷毀事件監(jiān)聽Pinia全局共享狀態(tài)適合登錄態(tài)、用戶信息、購物車props 和 emit 是最基礎(chǔ)的用法。子組件通過defineProps接收數(shù)據(jù)通過defineEmits通知父組件!-- Child.vue -- script setup const props defineProps({ title: { type: String, default: } }) const emit defineEmits([update]) function handleClick() { emit(update, 新的標(biāo)題) } /script template div p{{ title }}/p button clickhandleClick修改標(biāo)題/button /div /template父組件使用script setup import { ref } from vue import Child from ./Child.vue const title ref(默認(rèn)標(biāo)題) function onUpdate(val) { title.value val } /script template Child :titletitle updateonUpdate / /template這套模式理解之后再學(xué)provide/inject和 Pinia 會容易很多因為它們解決的都是數(shù)據(jù)共享問題只是層級范圍不同。4.2 Vue Router 4 和動態(tài)路由Vue Router 4 是 Vue3 官方路由庫。創(chuàng)建路由的核心代碼如下import { createRouter, createWebHistory } from vue-router const routes [ { path: /, component: () import(/views/Home.vue) }, { path: /user/:id, name: User, component: () import(/views/User.vue), meta: { requiresAuth: true } } ] const router createRouter({ history: createWebHistory(), routes }) export default router這里component使用箭頭函數(shù)實現(xiàn)路由懶加載只有訪問到對應(yīng)路由時才會加載組件文件這樣能明顯減小首屏體積。動態(tài)路由是后臺管理系統(tǒng)的高頻需求。常見思路是后端根據(jù)登錄用戶的角色返回菜單列表前端把菜單結(jié)構(gòu)轉(zhuǎn)換成路由配置再調(diào)用router.addRoute動態(tài)注冊。const menuList [ { path: /system/user, component: system/User }, { path: /system/role, component: system/Role } ] function convertToRoutes(menus) { return menus.map((item) ({ path: item.path, component: () import(/views/${item.component}.vue) })) }這里有一個 Vite 的注意點import()中的變量路徑不能是純動態(tài)拼接Vite 無法靜態(tài)分析。推薦使用import.meta.globconst modules import.meta.glob(/views/**/*.vue) function loadView(viewPath) { return modules[/src/views/${viewPath}.vue] }導(dǎo)航守衛(wèi)用于權(quán)限控制例如未登錄用戶不能進(jìn)入個人中心router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { next(/login) } else { next() } })4.3 Pinia 狀態(tài)管理Pinia 是 Vue3 官方推薦的狀態(tài)管理庫比 Vuex 更輕量TypeScript 支持也更好。注冊方式import { createPinia } from pinia const pinia createPinia() app.use(pinia)定義 storeimport { defineStore } from pinia export const useUserStore defineStore(user, { state: () ({ token: localStorage.getItem(token) || , userInfo: null }), actions: { login(payload) { this.token payload.token this.userInfo payload.userInfo }, logout() { this.token this.userInfo null localStorage.removeItem(token) } } })組件中使用import { useUserStore } from /stores/user const userStore useUserStore() userStore.login({ token: abc, userInfo: { name: 張三 } })Pinia 的狀態(tài)默認(rèn)存在內(nèi)存中刷新頁面會丟失。需要持久化時可以手動同步到 localStorage或使用pinia-plugin-persistedstate這類社區(qū)插件。4.4 Axios 封裝、國際化和組件庫實際項目里不會在每個頁面直接調(diào)用 fetch而是封裝一個統(tǒng)一的 Axios 實例統(tǒng)一處理接口地址、token、錯誤提示和登錄過期。import axios from axios const service axios.create({ baseURL: import.meta.env.VITE_API_BASE, timeout: 10000 }) service.interceptors.request.use((config) { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config }) service.interceptors.response.use( (response) response.data, (error) { if (error.response error.response.status 401) { localStorage.removeItem(token) window.location.href /login } return Promise.reject(error) } ) export default service國際化是后臺管理系統(tǒng)常見需求Vue3 使用 vue-i18nimport { createI18n } from vue-i18n const i18n createI18n({ legacy: false, locale: zh-CN, messages: { zh-CN: { hello: 你好 }, en-US: { hello: Hello } } })組件庫選擇上零基礎(chǔ)優(yōu)先推薦 Element Plus 或 Naive UI它們對 Vue3 支持成熟文檔完善。后臺管理系統(tǒng)里的 Tabs 標(biāo)簽頁、字典管理、菜單權(quán)限都能找到現(xiàn)成組件。字典管理的主要作用是把狀態(tài)碼映射成可讀文字避免在頁面里寫死業(yè)務(wù)判斷。如果要在 Vue3 中使用富文本編輯器注意老版本 vue-quill-editor 不一定兼容建議選用專門支持 Vue3 的封裝方案。4.5 后臺管理系統(tǒng)常見需求后臺管理系統(tǒng)是一個非常好的綜合練習(xí)項目因為它能覆蓋大量真實業(yè)務(wù)登錄、權(quán)限、菜單、用戶管理、字典管理、Tabs 標(biāo)簽頁、導(dǎo)出。修改組件庫內(nèi)部樣式時最常見的問題是 scoped 樣式不生效。scoped 會給當(dāng)前組件元素添加 data 屬性但組件庫內(nèi)部的 DOM 默認(rèn)沒有這個屬性。解決方式是使用:deep():deep(.el-tabs__item.is-active) { color: #409eff; }導(dǎo)出 Word 這類功能常見實現(xiàn)是前端把頁面內(nèi)容轉(zhuǎn)成 HTML借助 html-docx-js 類庫觸發(fā)下載更穩(wěn)妥的做法是后端根據(jù)模板生成文檔前端直接下載文件流。5. 一套 100 集教程應(yīng)該怎么學(xué)、怎么練5.1 按階段拆解學(xué)習(xí)計劃學(xué)習(xí)效率取決于階段劃分。下面是參考安排時間因人而異階段建議周期內(nèi)容練習(xí)產(chǎn)出基礎(chǔ)語法3-5 天模板語法、指令、事件、表單綁定計數(shù)器、待辦列表、表單頁組合式 API3-5 天ref、reactive、computed、watch購物車金額計算組件化5-7 天props、emit、插槽、生命周期封裝一個列表組件和彈窗組件路由3-5 天路由配置、懶加載、守衛(wèi)完成多頁面導(dǎo)航和登錄攔截Pinia2-3 天store、actions、持久化實現(xiàn)登錄態(tài)和用戶信息共享項目實戰(zhàn)7-10 天后臺管理系統(tǒng)或商城完成一個可運行項目面試專題2-3 天Vue2 與 Vue3 差異、原理、手寫題能口頭解釋核心概念不要追求一天看完幾十集。每學(xué)完一個模塊至少要完成一個不用看視頻就能寫出來的練習(xí)。5.2 每學(xué)完一個模塊如何自測判斷自己有沒有真正掌握一個知識點不是看“看懂了”而是看能不能獨立完成三件事。第一關(guān)掉視頻和教程憑記憶寫出核心代碼。寫不出來說明還沒內(nèi)化。第二能向別人講清楚“為什么”。例如能解釋為什么computed會緩存為什么ref在 script 里要.value。第三能獨立排查一個相關(guān)報錯。遇到問題后能判斷是語法錯誤、類型錯誤還是響應(yīng)式丟失。這種輸出型學(xué)習(xí)比被動刷視頻有效得多?？梢园褜W(xué)習(xí)筆記寫成博客或者錄一段帶講解的演示都能幫助鞏固。5.3 從教程到獨立項目的過渡教程項目練完以后要從模仿過渡到自己設(shè)計。方法很簡單換一個業(yè)務(wù)場景把課程里的技術(shù)點重新用一遍。例如課程做的是后臺管理系統(tǒng)你可以在自己的項目里加入這些功能。一個會員列表頁面需要登錄權(quán)限搜索條件可以篩選用戶點擊行能進(jìn)入詳情頁。詳情頁有用戶編輯表單保存后調(diào)用接口刷新列表。整個功能涉及路由、Axios、組件通信、Pinia 和表單校驗基本上把核心知識都串起來了。進(jìn)階方向可以嘗試商城項目考慮商品列表、購物車、庫存扣減、訂單狀態(tài)流轉(zhuǎn)也可以嘗試大文件上傳使用 Web Worker 做分片計算主線程負(fù)責(zé)上傳核心是理解 Worker 頁面線程之間的通信和分片合并邏輯。6. 常見問題排查從現(xiàn)象到根因6.1 安裝和啟動報錯現(xiàn)象執(zhí)行npm install時卡住、報 ERESOLVE 依賴沖突或者npm run dev后啟動失敗。常見原因Node 版本過低不同包管理器生成的 lock 文件沖突網(wǎng)絡(luò)源不穩(wěn)定。處理方式node -v rm -rf node_modules package-lock.json npm install如果網(wǎng)絡(luò)問題導(dǎo)致安裝失敗可以切換為國內(nèi)鏡像源。如果項目里的依賴沖突可以先嘗試使用 pnpmpnpm install啟動報錯時需要重點看終端最后幾行尤其是SyntaxError、ERR_MODULE_NOT_FOUND這類關(guān)鍵字。6.2 computed 不更新或頁面不刷新現(xiàn)象數(shù)據(jù)看起來已經(jīng)變了但頁面沒有更新。排查順序變量是否被ref或reactive包裹。普通變量和響應(yīng)式變量不綁定改了也不會觸發(fā)視圖更新。ref在 script 中是否漏寫.value。修改reactive對象時是否整體重新賦值。數(shù)組操作是否走了響應(yīng)式路徑。使用下標(biāo)修改數(shù)組時推薦用splice或直接賦新數(shù)組。// 錯誤頁面不更新 state.list[0] { name: 張三 } // 正確 state.list[0] { name: 張三 } state.list [...state.list]6.3 路由跳轉(zhuǎn)后組件不刷新現(xiàn)象從/user/1跳轉(zhuǎn)到/user/2時頁面數(shù)據(jù)沒有變化。原因是同一個路由組件被 Vue Router 復(fù)用組件的onMounted不會再次執(zhí)行。兩個常見處理方式第一種監(jiān)聽路由參數(shù)變化import { useRoute } from vue-router const route useRoute() watch( () route.params.id, (val) { // 重新請求數(shù)據(jù) fetchUser(val) } )第二種給router-view加 key強(qiáng)制組件重新創(chuàng)建router-view :key$route.fullPath /第二種更簡單但會銷毀重建組件適合數(shù)據(jù)頁如果組件內(nèi)部有滾動位置、臨時輸入等需要保留的狀態(tài)使用第一種更合適。6.4 修改組件庫樣式不生效現(xiàn)象給 Element Plus 的 Tabs、Table 等組件寫樣式發(fā)現(xiàn)覆蓋不生效。原因是 scoped 樣式隔離。組件庫內(nèi)部 DOM 沒有當(dāng)前組件的 data 屬性普通選擇器匹配不到。正確處理是用:deep()style scoped :deep(.el-tabs__item.is-active) { color: #409eff; font-weight: 600; } /style如果:deep()仍然不生效檢查是否被更高優(yōu)先級的選擇器覆蓋可以補(bǔ)充 class 層級或使用!important但不推薦大量使用!important。6.5 瀏覽器端的奇怪表現(xiàn)瀏覽器里出現(xiàn)按鈕位置異常、關(guān)閉行為異常、樣式不一致時不要急著改業(yè)務(wù)代碼。先確認(rèn)是否和瀏覽器版本、擴(kuò)展插件、系統(tǒng)主題有關(guān)。可以先在無痕窗口打開頁面禁用部分?jǐn)U展再測試。還有一類問題是系統(tǒng)環(huán)境層面的。比如 Linux 桌面環(huán)境偶爾會彈出gtk_im_module、debconf這類輸入法或?qū)υ捒蚪M件提示這些與 Vue 項目本身無關(guān)優(yōu)先在系統(tǒng)環(huán)境層面排查不要浪費時間追查組件代碼。下面是一個通用排查表問題現(xiàn)象定位方法處理建議項目啟動失敗看終端報錯最后幾行檢查 Node 版本、依賴、配置文件頁面數(shù)據(jù)不更新在修改處打印日志確認(rèn)是響應(yīng)式數(shù)據(jù)、有無 .value接口 401看 Network 請求響應(yīng)清理 token跳轉(zhuǎn)登錄頁樣式覆蓋失敗打開瀏覽器開發(fā)者工具檢查選擇器使用 :deep() 并提升優(yōu)先級打包后資源 404看 dist 中 index.html 路徑調(diào)整 vite.config 的 base 配置7. 面試準(zhǔn)備Vue2 與 Vue3 差異題怎么答7.1 高頻面試題和回答思路Vue3 相關(guān)面試題固定題型很多核心考察的不是背答案而是理解深度。面試題回答要點Vue2 和 Vue3 的區(qū)別響應(yīng)式原理、組合式 API、全局 API、性能優(yōu)化、TS 支持computed 和 watch 的區(qū)別computed 有緩存、依賴派生數(shù)據(jù)watch 監(jiān)聽變化并執(zhí)行副作用ref 和 reactive 的區(qū)別ref 處理基礎(chǔ)類型且整體可替換reactive 處理對象但不建議整體賦值為什么 Vue3 用 Proxy能攔截新增屬性和數(shù)組下標(biāo)Object.defineProperty 做不到v-if 和 v-for 誰的優(yōu)先級高Vue3 中 v-if 優(yōu)先級更高但同一元素上不建議同時使用組件通信有哪些方式props/emit、v-model、ref、provide/inject、mitt、Pinia路由懶加載怎么做component 使用動態(tài) import 或 defineAsyncComponentkeep-alive 的作用緩存組件實例狀態(tài)減少重復(fù)渲染Vue3 做了哪些性能優(yōu)化靜態(tài)標(biāo)記、事件緩存、Tree Shaking、Fragment回答 Vue2 和 Vue3 差異時不要只列“選項式改組合式”?？梢园催@條線展開響應(yīng)式系統(tǒng)從Object.defineProperty換成了Proxy解決了新增屬性和數(shù)組下標(biāo)監(jiān)聽問題組合式 API 解決了邏輯復(fù)用和代碼組織問題全局 API 改為createApp實例Tree Shaking 讓打包體積更小。7.2 用項目經(jīng)歷回答問題面試官不會只聽概念更想知道你如何在項目里用這些技術(shù)。準(zhǔn)備一個從零到一的完整項目講清楚三件事。項目為什么選 Vue3 Vite Pinia。可以回答團(tuán)隊需要更好的 TypeScript 支持Vite 開發(fā)速度更快Pinia 比 Vuex 更輕量。遇到什么問題怎么排查的。例如動態(tài)路由在 Vite 下組件加載失敗最后用import.meta.glob解決。做了什么優(yōu)化。例如路由懶加載Axios 攔截器統(tǒng)一處理 token長列表虛擬滾動圖片懶加載。7.3 面試中的代碼題Vue3 面試中代碼題大概率圍繞響應(yīng)式和組件設(shè)計。常見題目包括手寫簡單的ref或reactive實現(xiàn)原理實現(xiàn)一個支持v-model的組件把后端返回的菜單數(shù)組轉(zhuǎn)換成路由實現(xiàn)一個防抖函數(shù)或數(shù)組轉(zhuǎn)樹形結(jié)構(gòu)。這類題目考察的不只是語法還有對響應(yīng)式依賴收集、組件通信和工程化工具的理解。練習(xí)時可以專門做一個“手寫題清單”每道題要求在規(guī)定時間內(nèi)寫出核心邏輯并口頭解釋關(guān)鍵步驟。8. 從會用到能用最佳實踐清單8.1 代碼組織規(guī)范項目一復(fù)雜目錄結(jié)構(gòu)會直接影響維護(hù)效率。推薦用下面這種分層src/ ├── api/ # 接口請求 ├── assets/ # 靜態(tài)資源 ├── components/ # 公共組件 ├── composables/ # 組合式函數(shù) ├── router/ # 路由配置 ├── stores/ # Pinia 狀態(tài) ├── styles/ # 全局樣式 ├── utils/ # 工具函數(shù) └── views/ # 頁面組件接口請求不要散落在頁面里統(tǒng)一放到api目錄。公共組件和業(yè)務(wù)組件區(qū)分開業(yè)務(wù)組件放在各自頁面目錄下。邏輯復(fù)用優(yōu)先抽成composables而不是把所有代碼都堆在組件里。8.2 性能優(yōu)化注意點Vue3 性能優(yōu)化的重點不是炫技而是避免常見壞寫法。v-for一定要寫keykey 要穩(wěn)定唯一不要用數(shù)組下標(biāo)。模板中不要寫復(fù)雜表達(dá)式派生數(shù)據(jù)放到computed。大數(shù)據(jù)量列表優(yōu)先使用虛擬滾動不要一次渲染上萬條 DOM。組件和路由按需加載減少首屏體積。大型表單和嵌套組件注意避免不必要的重復(fù)渲染。shallowRef和shallowReactive是更細(xì)粒度的優(yōu)化手段適合管理大型對象且不需要深層響應(yīng)式的場景。零基礎(chǔ)可以先了解不急著在項目里使用。8.3 可復(fù)用清單環(huán)境檢查清單Node.js 版本是否為 18 以上。包管理器是否統(tǒng)一。npm run dev能正常啟動。npm run build能正常打包。接口地址是否按環(huán)境區(qū)分。瀏覽器開發(fā)者工具中 Vue Devtools 是否可用。發(fā)布前檢查清單路由是否懶加載。環(huán)境變量是否配置正確。登錄守衛(wèi)和權(quán)限控制是否完整。接口錯誤是否有全局提示。打包體積是否可接受。是否存在敏感信息硬編碼。學(xué)習(xí)自查清單能獨立創(chuàng)建并啟動 Vue3 項目。能寫一個帶響應(yīng)式狀態(tài)的組件。能實現(xiàn)父子組件通信。能完成路由配置和登錄攔截。能用 Pinia 管理全局登錄態(tài)。能排查一個真實報錯并說清原因。把這些清單保存下來每次學(xué)習(xí)一個模塊、每次發(fā)布一個項目、每次面試前都拿出來對照一遍比盲目刷視頻更有效。學(xué)習(xí) Vue3 最重要的判斷標(biāo)準(zhǔn)不是“看過多少集”而是“能獨立完成多少個最小閉環(huán)”。從環(huán)境搭建到組件通信從路由到狀態(tài)管理從項目打包到問題排查每完成一個閉環(huán)你對 Vue3 的掌控力就加深一層。下一步建議選擇一個真實業(yè)務(wù)場景用 Vue3 從頭落地一個小項目把路由、狀態(tài)、請求、權(quán)限都串起來。項目跑通之后再往 TypeScript、SSR、微前端這些方向擴(kuò)展會順理成章得多。 Vue3零基礎(chǔ)學(xué)習(xí)路線：從組合式API到項目實戰(zhàn)全解析
自學(xué) Vue3 這件事難點通常不在單個語法而在知識點太多、彼此之間又互相耦合。很多人在視頻網(wǎng)站上看到的 Vue3 全套教程標(biāo)題寫著“零基礎(chǔ)”“從入門到精通”“學(xué)完即可就業(yè)”。這類說法帶有明顯的宣傳成分真正決定學(xué)習(xí)效果的是課程有沒有覆蓋完整的知識鏈條以及你練習(xí)時有沒有形成閉環(huán)。對于零基礎(chǔ)或剛從 Vue2 轉(zhuǎn)過來的開發(fā)者來說與其糾結(jié)“看哪一套視頻”不如先搞清楚一套合格教程應(yīng)該包含哪些模塊再按模塊去學(xué)、去練、去排查、去沉淀。這篇文章就以一套典型的 100 集 Vue3 教程為參考拆解它的知識結(jié)構(gòu)同時把零基礎(chǔ)最容易踩的坑、最需要理解的原理、最應(yīng)該動手練的案例講清楚。學(xué)完之后你能得到一張 Vue3 的學(xué)習(xí)地圖、一套可復(fù)現(xiàn)的工程搭建流程、一組高頻面試題的回答思路以及一份可以直接拿去用的項目檢查清單。1. 先弄清 Vue3 這套學(xué)習(xí)體系到底覆蓋了什么1.1 Vue3 解決什么問題和 Vue2 的核心差異Vue3 是 Vue.js 的下一個大版本。它在 Vue2 的基礎(chǔ)上重寫了響應(yīng)式系統(tǒng)引入了組合式 API并大幅提升了 TypeScript 支持。理解 Vue3不能只把它當(dāng)成“升級版的 Vue2”而要理解它到底解決了什么具體問題。Vue2 在大型項目里存在幾個長期痛點邏輯復(fù)用依賴 mixins命名沖突和來源不清晰新增屬性需要調(diào)用Vue.set數(shù)組下標(biāo)修改無法自動響應(yīng)對 TypeScript 的支持比較勉強(qiáng)。Vue3 用 Proxy 重寫響應(yīng)式系統(tǒng)后新增屬性、數(shù)組索引修改都能被監(jiān)聽類型推導(dǎo)也順暢很多。核心差異可以用一張表概括對比點Vue2Vue3響應(yīng)式實現(xiàn)Object.defineProperty新增屬性需 Vue.setProxy支持新增屬性和數(shù)組下標(biāo)API 風(fēng)格Options API 為主Options API 和 Composition API 并存邏輯復(fù)用方式mixins命名沖突明顯composables邏輯更清晰TypeScript 支持較弱官方優(yōu)先支持全局 APIVue.component 等掛載到 Vue 構(gòu)造器createApp 返回 app 實例filter支持移除組件 v-model只能有一個支持多個 v-model 參數(shù)對零基礎(chǔ)學(xué)習(xí)者來說建議直接按 Vue3 的思維學(xué)習(xí)不要先學(xué) Vue2 再“轉(zhuǎn)” Vue3。兩者雖然模板語法相似但響應(yīng)式原理、組合式 API 的寫作方式、工程化工具鏈差異很大混著學(xué)容易造成概念混亂。1.2 一套完整零基礎(chǔ)教程應(yīng)有的知識模塊劃分100 集只是一個數(shù)量概念關(guān)鍵是內(nèi)容結(jié)構(gòu)。一套合格的零基礎(chǔ)教程至少要覆蓋下面這些模塊模塊范圍學(xué)完后能做什么環(huán)境與工具鏈Node.js、Vite、npm/pnpm、Vue Devtools創(chuàng)建并啟動 Vue3 項目基礎(chǔ)語法模板語法、指令、事件、表單綁定寫一個可交互頁面組合式 APIsetup、ref、reactive、computed、watch管理組件內(nèi)部狀態(tài)組件化props、emit、插槽、生命周期、組件通信拆分并復(fù)用組件Vue Router路由配置、懶加載、導(dǎo)航守衛(wèi)、動態(tài)路由實現(xiàn)多頁面應(yīng)用Piniastore 定義、狀態(tài)管理、持久化管理登錄態(tài)和全局?jǐn)?shù)據(jù)網(wǎng)絡(luò)請求Axios 封裝、攔截器、錯誤處理對接后端接口工程化實戰(zhàn)后臺管理系統(tǒng)、商城、組件庫、代碼規(guī)范完成一個可演示項目面試專題Vue2 與 Vue3 差異、源碼原理、常見題應(yīng)付前端面試模塊之間是遞進(jìn)關(guān)系。環(huán)境沒配好后面所有代碼都沒法運行基礎(chǔ)語法不熟寫組件通信時會反復(fù)返工路由和狀態(tài)管理沒搞懂做項目時會卡在頁面跳轉(zhuǎn)和數(shù)據(jù)共享上。1.3 學(xué)習(xí)前要有兩個心理預(yù)期第一看視頻不等于學(xué)會。真正的學(xué)習(xí)發(fā)生在你關(guān)掉視頻、獨立寫出代碼、遇到報錯并解決的那一刻。第二“一周精通”不現(xiàn)實但一周之內(nèi)完全可以掌握 Vue3 的基礎(chǔ)語法并跑通一個簡單項目。把目標(biāo)從“刷完 100 集”改成“完成 5 個最小練習(xí)”效果會好很多。注意選教程時不要只看集數(shù)要看它是否包含環(huán)境配置、實戰(zhàn)項目和排錯過程。沒有排錯過程的教程遇到問題后你仍然無從下手。2. 環(huán)境準(zhǔn)備先把 Vue3 跑起來再談?wù)Z法2.1 Node.js 和包管理器版本確認(rèn)Vue3 的工程化依賴 Node.js 和包管理器。版本不對后面安裝依賴時會報一堆看不懂的錯。打開終端先檢查當(dāng)前版本node -v npm -v推薦使用 Node.js 18 或更高版本因為 Vite 5 要求 Node 18。如果版本過低建議去 Node 官網(wǎng)下載 LTS 版本或者使用 Node 版本管理工具切換。包管理器方面Vue3 項目可以使用 npm、pnpm 或 yarn。這里推薦 pnpm原因有兩個安裝速度更快磁盤占用更小。首次使用需要先安裝npm install -g pnpm pnpm -v零基礎(chǔ)階段不必糾結(jié)用哪個先選定一個保持一致。2.2 用 Vite 創(chuàng)建第一個 Vue3 項目Vite 是 Vue3 官方推薦的構(gòu)建工具。相比 Webpack開發(fā)環(huán)境的冷啟動速度更快配置也更簡潔。創(chuàng)建項目npm create vitelatest vue3-demo -- --template vue命令執(zhí)行后會生成一個名為 vue3-demo 的目錄然后進(jìn)入目錄安裝依賴并啟動開發(fā)服務(wù)器cd vue3-demo npm install npm run dev終端會出現(xiàn)一個本地地址例如http://localhost:5173瀏覽器打開后能看到 Vue3 的默認(rèn)頁面說明第一個項目已經(jīng)跑通了。也可以使用官方提供的create-vue腳手架它會在創(chuàng)建過程中詢問是否安裝 Vue Router、Pinia、ESLint 等適合做完整項目時使用npm create vuelatest兩者的區(qū)別在于create-vite更輕量適合起步create-vue更完整適合從零搭建一個工程化項目。2.3 項目目錄結(jié)構(gòu)和啟動流程新建項目后核心目錄結(jié)構(gòu)如下vue3-demo ├── index.html ├── package.json ├── vite.config.js ├── public/ └── src/ ├── main.js ├── App.vue ├── components/ └── assets/index.html是整個應(yīng)用的入口頁面。Vue3 項目里的index.html放在根目錄而不是 public 目錄這一點和 Vue2 腳手架不同。src/main.js負(fù)責(zé)創(chuàng)建應(yīng)用實例并掛載到頁面import { createApp } from vue import App from ./App.vue createApp(App).mount(#app)這段代碼做了兩件事用createApp創(chuàng)建應(yīng)用實例再用mount把根組件掛載到index.html中 id 為app的節(jié)點上。Vue3 里不再使用new Vue()這是需要記住的第一個差異化點。2.4 學(xué)習(xí)環(huán)境與生產(chǎn)環(huán)境的差異學(xué)習(xí)階段使用npm run dev啟動開發(fā)服務(wù)器代碼改動會自動熱更新。但開發(fā)服務(wù)器只適合本地調(diào)試不能直接當(dāng)作生產(chǎn)環(huán)境。生產(chǎn)環(huán)境需要先構(gòu)建產(chǎn)物npm run build npm run previewnpm run build會把項目編譯到dist目錄preview可以在本地預(yù)覽打包后的效果。實際部署時把dist目錄上傳到 Nginx 或其他靜態(tài)服務(wù)器即可。不同環(huán)境需要不同的接口地址可以通過.env文件管理# .env.development VITE_APP_TITLEvue3-demo-dev VITE_API_BASE/api-dev # .env.production VITE_APP_TITLEvue3-demo-prod VITE_API_BASE/api-prod在代碼里通過import.meta.env讀取const apiBase import.meta.env.VITE_API_BASE這里需要注意只有以VITE_開頭的變量會暴露給前端代碼其他變量不會。3. 組合式 API 是零基礎(chǔ)最容易混亂的部分3.1 setup 語法糖和 ref、reactive 的選型組合式 API 是 Vue3 最核心的變化。最簡單也最常用的寫法是script setup它讓代碼更簡潔不需要手動return變量。script setup import { ref, reactive } from vue const count ref(0) const form reactive({ name: , age: 18 }) function add() { count.value } /script template div pcount: {{ count }}/p pname: {{ form.name }}/p button clickadd1/button /div /template這段代碼里有兩個重點。ref適合基礎(chǔ)類型也可以包裹對象。在 script 中讀取或修改ref時必須通過.value模板中會自動解包不需要寫.value。reactive只能接收對象適合聲明表單、配置項這類內(nèi)部字段較多的結(jié)構(gòu)。但reactive有一個容易踩的坑如果直接整體替換對象響應(yīng)性會丟失。// 這樣寫不會更新頁面 form { name: 李四, age: 20 } // 這樣寫會更新頁面 form.name 李四 form.age 20實際項目里建議統(tǒng)一以ref為主對象狀態(tài)可以用ref包裹這樣整體賦值也方便。reactive更適合不需要整體替換、只修改內(nèi)部字段的場景。另一個常見問題是從reactive對象中解構(gòu)屬性const { name } form // name 是普通字符串修改它不會觸發(fā)頁面更新如果確實需要解構(gòu)并保持響應(yīng)性可以用toRefs。3.2 computed 的使用、依賴追蹤和錯誤用法computed用來聲明派生狀態(tài)。它的核心特點是帶緩存只有依賴的響應(yīng)式數(shù)據(jù)變化時才會重新計算。import { ref, computed } from vue const price ref(100) const count ref(2) const total computed(() price.value * count.value)模板中使用total即可不需要寫括號。和methods的區(qū)別是方法每次渲染都會執(zhí)行computed只會在依賴變化時重新計算。零基礎(chǔ)最常見的錯誤是試圖直接修改computed的返回值const fullName computed(() { return firstName.value lastName.value }) // 錯誤不會生效 fullName.value 張三 李四computed默認(rèn)是只讀的。如果確實需要支持修改應(yīng)該傳入一個帶set的對象const fullName computed({ get() { return firstName.value lastName.value }, set(val) { const parts val.split( ) firstName.value parts[0] lastName.value parts[1] } })需要注意computed的 getter 里不要寫網(wǎng)絡(luò)請求、修改其他狀態(tài)這類副作用邏輯。副作用應(yīng)該放在watch或事件處理函數(shù)中。3.3 watch 與 watchEffect 的適用場景watch用于監(jiān)聽指定數(shù)據(jù)源的變化適合在變化后執(zhí)行異步操作或處理新舊值。import { watch, ref } from vue const keyword ref() watch(keyword, (newVal, oldVal) { console.log(關(guān)鍵詞變化, oldVal, -, newVal) })監(jiān)聽reactive對象中的某個屬性時需要傳入一個 getter 函數(shù)const form reactive({ name: , age: 18 }) watch( () form.name, (val, oldVal) { console.log(val, oldVal) } )watchEffect的用法不同它會自動收集函數(shù)內(nèi)部用到的所有響應(yīng)式依賴依賴變化時自動執(zhí)行一次。import { watchEffect, ref } from vue const id ref(1) const info ref(null) watchEffect(async () { const res await fetch(/api/user/${id.value}) info.value await res.json() })watchEffect適合“根據(jù)狀態(tài)主動觸發(fā)副作用”的場景缺點是拿不到舊值。日常開發(fā)中明確需要監(jiān)聽某個數(shù)據(jù)源時優(yōu)先用watch需要自動追蹤多個依賴時用watchEffect更省事。3.4 生命周期在組合式 API 中的寫法Vue2 選項式 API 里的created、mounted等方法在 Vue3 組合式 API 中變成了帶on前綴的函數(shù)選項式寫法組合式寫法觸發(fā)時機(jī)beforeCreate / created直接在 setup 中編寫邏輯組件創(chuàng)建階段beforeMountonBeforeMount掛載前mountedonMounted掛載完成beforeUpdateonBeforeUpdate數(shù)據(jù)變化準(zhǔn)備更新 DOMupdatedonUpdatedDOM 更新完成beforeUnmountonBeforeUnmount卸載前unmountedonUnmounted卸載完成import { onMounted, onUnmounted } from vue onMounted(() { console.log(組件掛載完成) }) onUnmounted(() { console.log(組件卸載) })beforeCreate和created在script setup中可以直接理解為 setup 內(nèi)部的代碼因為 setup 本身就在創(chuàng)建階段執(zhí)行。注意組合式 API 的生命周期函數(shù)必須在 setup 執(zhí)行期間同步調(diào)用不要寫在 setTimeout 或其他異步回調(diào)里否則無法正確注冊。4. 組件通信和工程化進(jìn)階要一起學(xué)4.1 組件通信的六種方式組件化是 Vue 的核心但新手在寫業(yè)務(wù)時最容易卡在“子組件怎么把數(shù)據(jù)傳給父組件”。Vue3 中常用的通信方式有六種方式適用場景注意事項props / emit父子組件直接通信props 單向流動不能直接修改v-model表單類組件雙向綁定Vue3 支持多個 v-modelref defineExpose父組件調(diào)用子組件方法或讀取狀態(tài)子組件需要顯式暴露provide / inject跨層級組件共享數(shù)據(jù)數(shù)據(jù)不是響應(yīng)式時需額外處理mitt / EventBus非父子組件通信需要手動銷毀事件監(jiān)聽Pinia全局共享狀態(tài)適合登錄態(tài)、用戶信息、購物車props 和 emit 是最基礎(chǔ)的用法。子組件通過defineProps接收數(shù)據(jù)通過defineEmits通知父組件!-- Child.vue -- script setup const props defineProps({ title: { type: String, default: } }) const emit defineEmits([update]) function handleClick() { emit(update, 新的標(biāo)題) } /script template div p{{ title }}/p button clickhandleClick修改標(biāo)題/button /div /template父組件使用script setup import { ref } from vue import Child from ./Child.vue const title ref(默認(rèn)標(biāo)題) function onUpdate(val) { title.value val } /script template Child :titletitle updateonUpdate / /template這套模式理解之后再學(xué)provide/inject和 Pinia 會容易很多因為它們解決的都是數(shù)據(jù)共享問題只是層級范圍不同。4.2 Vue Router 4 和動態(tài)路由Vue Router 4 是 Vue3 官方路由庫。創(chuàng)建路由的核心代碼如下import { createRouter, createWebHistory } from vue-router const routes [ { path: /, component: () import(/views/Home.vue) }, { path: /user/:id, name: User, component: () import(/views/User.vue), meta: { requiresAuth: true } } ] const router createRouter({ history: createWebHistory(), routes }) export default router這里component使用箭頭函數(shù)實現(xiàn)路由懶加載只有訪問到對應(yīng)路由時才會加載組件文件這樣能明顯減小首屏體積。動態(tài)路由是后臺管理系統(tǒng)的高頻需求。常見思路是后端根據(jù)登錄用戶的角色返回菜單列表前端把菜單結(jié)構(gòu)轉(zhuǎn)換成路由配置再調(diào)用router.addRoute動態(tài)注冊。const menuList [ { path: /system/user, component: system/User }, { path: /system/role, component: system/Role } ] function convertToRoutes(menus) { return menus.map((item) ({ path: item.path, component: () import(/views/${item.component}.vue) })) }這里有一個 Vite 的注意點import()中的變量路徑不能是純動態(tài)拼接Vite 無法靜態(tài)分析。推薦使用import.meta.globconst modules import.meta.glob(/views/**/*.vue) function loadView(viewPath) { return modules[/src/views/${viewPath}.vue] }導(dǎo)航守衛(wèi)用于權(quán)限控制例如未登錄用戶不能進(jìn)入個人中心router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { next(/login) } else { next() } })4.3 Pinia 狀態(tài)管理Pinia 是 Vue3 官方推薦的狀態(tài)管理庫比 Vuex 更輕量TypeScript 支持也更好。注冊方式import { createPinia } from pinia const pinia createPinia() app.use(pinia)定義 storeimport { defineStore } from pinia export const useUserStore defineStore(user, { state: () ({ token: localStorage.getItem(token) || , userInfo: null }), actions: { login(payload) { this.token payload.token this.userInfo payload.userInfo }, logout() { this.token this.userInfo null localStorage.removeItem(token) } } })組件中使用import { useUserStore } from /stores/user const userStore useUserStore() userStore.login({ token: abc, userInfo: { name: 張三 } })Pinia 的狀態(tài)默認(rèn)存在內(nèi)存中刷新頁面會丟失。需要持久化時可以手動同步到 localStorage或使用pinia-plugin-persistedstate這類社區(qū)插件。4.4 Axios 封裝、國際化和組件庫實際項目里不會在每個頁面直接調(diào)用 fetch而是封裝一個統(tǒng)一的 Axios 實例統(tǒng)一處理接口地址、token、錯誤提示和登錄過期。import axios from axios const service axios.create({ baseURL: import.meta.env.VITE_API_BASE, timeout: 10000 }) service.interceptors.request.use((config) { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config }) service.interceptors.response.use( (response) response.data, (error) { if (error.response error.response.status 401) { localStorage.removeItem(token) window.location.href /login } return Promise.reject(error) } ) export default service國際化是后臺管理系統(tǒng)常見需求Vue3 使用 vue-i18nimport { createI18n } from vue-i18n const i18n createI18n({ legacy: false, locale: zh-CN, messages: { zh-CN: { hello: 你好 }, en-US: { hello: Hello } } })組件庫選擇上零基礎(chǔ)優(yōu)先推薦 Element Plus 或 Naive UI它們對 Vue3 支持成熟文檔完善。后臺管理系統(tǒng)里的 Tabs 標(biāo)簽頁、字典管理、菜單權(quán)限都能找到現(xiàn)成組件。字典管理的主要作用是把狀態(tài)碼映射成可讀文字避免在頁面里寫死業(yè)務(wù)判斷。如果要在 Vue3 中使用富文本編輯器注意老版本 vue-quill-editor 不一定兼容建議選用專門支持 Vue3 的封裝方案。4.5 后臺管理系統(tǒng)常見需求后臺管理系統(tǒng)是一個非常好的綜合練習(xí)項目因為它能覆蓋大量真實業(yè)務(wù)登錄、權(quán)限、菜單、用戶管理、字典管理、Tabs 標(biāo)簽頁、導(dǎo)出。修改組件庫內(nèi)部樣式時最常見的問題是 scoped 樣式不生效。scoped 會給當(dāng)前組件元素添加 data 屬性但組件庫內(nèi)部的 DOM 默認(rèn)沒有這個屬性。解決方式是使用:deep():deep(.el-tabs__item.is-active) { color: #409eff; }導(dǎo)出 Word 這類功能常見實現(xiàn)是前端把頁面內(nèi)容轉(zhuǎn)成 HTML借助 html-docx-js 類庫觸發(fā)下載更穩(wěn)妥的做法是后端根據(jù)模板生成文檔前端直接下載文件流。5. 一套 100 集教程應(yīng)該怎么學(xué)、怎么練5.1 按階段拆解學(xué)習(xí)計劃學(xué)習(xí)效率取決于階段劃分。下面是參考安排時間因人而異階段建議周期內(nèi)容練習(xí)產(chǎn)出基礎(chǔ)語法3-5 天模板語法、指令、事件、表單綁定計數(shù)器、待辦列表、表單頁組合式 API3-5 天ref、reactive、computed、watch購物車金額計算組件化5-7 天props、emit、插槽、生命周期封裝一個列表組件和彈窗組件路由3-5 天路由配置、懶加載、守衛(wèi)完成多頁面導(dǎo)航和登錄攔截Pinia2-3 天store、actions、持久化實現(xiàn)登錄態(tài)和用戶信息共享項目實戰(zhàn)7-10 天后臺管理系統(tǒng)或商城完成一個可運行項目面試專題2-3 天Vue2 與 Vue3 差異、原理、手寫題能口頭解釋核心概念不要追求一天看完幾十集。每學(xué)完一個模塊至少要完成一個不用看視頻就能寫出來的練習(xí)。5.2 每學(xué)完一個模塊如何自測判斷自己有沒有真正掌握一個知識點不是看“看懂了”而是看能不能獨立完成三件事。第一關(guān)掉視頻和教程憑記憶寫出核心代碼。寫不出來說明還沒內(nèi)化。第二能向別人講清楚“為什么”。例如能解釋為什么computed會緩存為什么ref在 script 里要.value。第三能獨立排查一個相關(guān)報錯。遇到問題后能判斷是語法錯誤、類型錯誤還是響應(yīng)式丟失。這種輸出型學(xué)習(xí)比被動刷視頻有效得多?？梢园褜W(xué)習(xí)筆記寫成博客或者錄一段帶講解的演示都能幫助鞏固。5.3 從教程到獨立項目的過渡教程項目練完以后要從模仿過渡到自己設(shè)計。方法很簡單換一個業(yè)務(wù)場景把課程里的技術(shù)點重新用一遍。例如課程做的是后臺管理系統(tǒng)你可以在自己的項目里加入這些功能。一個會員列表頁面需要登錄權(quán)限搜索條件可以篩選用戶點擊行能進(jìn)入詳情頁。詳情頁有用戶編輯表單保存后調(diào)用接口刷新列表。整個功能涉及路由、Axios、組件通信、Pinia 和表單校驗基本上把核心知識都串起來了。進(jìn)階方向可以嘗試商城項目考慮商品列表、購物車、庫存扣減、訂單狀態(tài)流轉(zhuǎn)也可以嘗試大文件上傳使用 Web Worker 做分片計算主線程負(fù)責(zé)上傳核心是理解 Worker 頁面線程之間的通信和分片合并邏輯。6. 常見問題排查從現(xiàn)象到根因6.1 安裝和啟動報錯現(xiàn)象執(zhí)行npm install時卡住、報 ERESOLVE 依賴沖突或者npm run dev后啟動失敗。常見原因Node 版本過低不同包管理器生成的 lock 文件沖突網(wǎng)絡(luò)源不穩(wěn)定。處理方式node -v rm -rf node_modules package-lock.json npm install如果網(wǎng)絡(luò)問題導(dǎo)致安裝失敗可以切換為國內(nèi)鏡像源。如果項目里的依賴沖突可以先嘗試使用 pnpmpnpm install啟動報錯時需要重點看終端最后幾行尤其是SyntaxError、ERR_MODULE_NOT_FOUND這類關(guān)鍵字。6.2 computed 不更新或頁面不刷新現(xiàn)象數(shù)據(jù)看起來已經(jīng)變了但頁面沒有更新。排查順序變量是否被ref或reactive包裹。普通變量和響應(yīng)式變量不綁定改了也不會觸發(fā)視圖更新。ref在 script 中是否漏寫.value。修改reactive對象時是否整體重新賦值。數(shù)組操作是否走了響應(yīng)式路徑。使用下標(biāo)修改數(shù)組時推薦用splice或直接賦新數(shù)組。// 錯誤頁面不更新 state.list[0] { name: 張三 } // 正確 state.list[0] { name: 張三 } state.list [...state.list]6.3 路由跳轉(zhuǎn)后組件不刷新現(xiàn)象從/user/1跳轉(zhuǎn)到/user/2時頁面數(shù)據(jù)沒有變化。原因是同一個路由組件被 Vue Router 復(fù)用組件的onMounted不會再次執(zhí)行。兩個常見處理方式第一種監(jiān)聽路由參數(shù)變化import { useRoute } from vue-router const route useRoute() watch( () route.params.id, (val) { // 重新請求數(shù)據(jù) fetchUser(val) } )第二種給router-view加 key強(qiáng)制組件重新創(chuàng)建router-view :key$route.fullPath /第二種更簡單但會銷毀重建組件適合數(shù)據(jù)頁如果組件內(nèi)部有滾動位置、臨時輸入等需要保留的狀態(tài)使用第一種更合適。6.4 修改組件庫樣式不生效現(xiàn)象給 Element Plus 的 Tabs、Table 等組件寫樣式發(fā)現(xiàn)覆蓋不生效。原因是 scoped 樣式隔離。組件庫內(nèi)部 DOM 沒有當(dāng)前組件的 data 屬性普通選擇器匹配不到。正確處理是用:deep()style scoped :deep(.el-tabs__item.is-active) { color: #409eff; font-weight: 600; } /style如果:deep()仍然不生效檢查是否被更高優(yōu)先級的選擇器覆蓋可以補(bǔ)充 class 層級或使用!important但不推薦大量使用!important。6.5 瀏覽器端的奇怪表現(xiàn)瀏覽器里出現(xiàn)按鈕位置異常、關(guān)閉行為異常、樣式不一致時不要急著改業(yè)務(wù)代碼。先確認(rèn)是否和瀏覽器版本、擴(kuò)展插件、系統(tǒng)主題有關(guān)。可以先在無痕窗口打開頁面禁用部分?jǐn)U展再測試。還有一類問題是系統(tǒng)環(huán)境層面的。比如 Linux 桌面環(huán)境偶爾會彈出gtk_im_module、debconf這類輸入法或?qū)υ捒蚪M件提示這些與 Vue 項目本身無關(guān)優(yōu)先在系統(tǒng)環(huán)境層面排查不要浪費時間追查組件代碼。下面是一個通用排查表問題現(xiàn)象定位方法處理建議項目啟動失敗看終端報錯最后幾行檢查 Node 版本、依賴、配置文件頁面數(shù)據(jù)不更新在修改處打印日志確認(rèn)是響應(yīng)式數(shù)據(jù)、有無 .value接口 401看 Network 請求響應(yīng)清理 token跳轉(zhuǎn)登錄頁樣式覆蓋失敗打開瀏覽器開發(fā)者工具檢查選擇器使用 :deep() 并提升優(yōu)先級打包后資源 404看 dist 中 index.html 路徑調(diào)整 vite.config 的 base 配置7. 面試準(zhǔn)備Vue2 與 Vue3 差異題怎么答7.1 高頻面試題和回答思路Vue3 相關(guān)面試題固定題型很多核心考察的不是背答案而是理解深度。面試題回答要點Vue2 和 Vue3 的區(qū)別響應(yīng)式原理、組合式 API、全局 API、性能優(yōu)化、TS 支持computed 和 watch 的區(qū)別computed 有緩存、依賴派生數(shù)據(jù)watch 監(jiān)聽變化并執(zhí)行副作用ref 和 reactive 的區(qū)別ref 處理基礎(chǔ)類型且整體可替換reactive 處理對象但不建議整體賦值為什么 Vue3 用 Proxy能攔截新增屬性和數(shù)組下標(biāo)Object.defineProperty 做不到v-if 和 v-for 誰的優(yōu)先級高Vue3 中 v-if 優(yōu)先級更高但同一元素上不建議同時使用組件通信有哪些方式props/emit、v-model、ref、provide/inject、mitt、Pinia路由懶加載怎么做component 使用動態(tài) import 或 defineAsyncComponentkeep-alive 的作用緩存組件實例狀態(tài)減少重復(fù)渲染Vue3 做了哪些性能優(yōu)化靜態(tài)標(biāo)記、事件緩存、Tree Shaking、Fragment回答 Vue2 和 Vue3 差異時不要只列“選項式改組合式”?？梢园催@條線展開響應(yīng)式系統(tǒng)從Object.defineProperty換成了Proxy解決了新增屬性和數(shù)組下標(biāo)監(jiān)聽問題組合式 API 解決了邏輯復(fù)用和代碼組織問題全局 API 改為createApp實例Tree Shaking 讓打包體積更小。7.2 用項目經(jīng)歷回答問題面試官不會只聽概念更想知道你如何在項目里用這些技術(shù)。準(zhǔn)備一個從零到一的完整項目講清楚三件事。項目為什么選 Vue3 Vite Pinia。可以回答團(tuán)隊需要更好的 TypeScript 支持Vite 開發(fā)速度更快Pinia 比 Vuex 更輕量。遇到什么問題怎么排查的。例如動態(tài)路由在 Vite 下組件加載失敗最后用import.meta.glob解決。做了什么優(yōu)化。例如路由懶加載Axios 攔截器統(tǒng)一處理 token長列表虛擬滾動圖片懶加載。7.3 面試中的代碼題Vue3 面試中代碼題大概率圍繞響應(yīng)式和組件設(shè)計。常見題目包括手寫簡單的ref或reactive實現(xiàn)原理實現(xiàn)一個支持v-model的組件把后端返回的菜單數(shù)組轉(zhuǎn)換成路由實現(xiàn)一個防抖函數(shù)或數(shù)組轉(zhuǎn)樹形結(jié)構(gòu)。這類題目考察的不只是語法還有對響應(yīng)式依賴收集、組件通信和工程化工具的理解。練習(xí)時可以專門做一個“手寫題清單”每道題要求在規(guī)定時間內(nèi)寫出核心邏輯并口頭解釋關(guān)鍵步驟。8. 從會用到能用最佳實踐清單8.1 代碼組織規(guī)范項目一復(fù)雜目錄結(jié)構(gòu)會直接影響維護(hù)效率。推薦用下面這種分層src/ ├── api/ # 接口請求 ├── assets/ # 靜態(tài)資源 ├── components/ # 公共組件 ├── composables/ # 組合式函數(shù) ├── router/ # 路由配置 ├── stores/ # Pinia 狀態(tài) ├── styles/ # 全局樣式 ├── utils/ # 工具函數(shù) └── views/ # 頁面組件接口請求不要散落在頁面里統(tǒng)一放到api目錄。公共組件和業(yè)務(wù)組件區(qū)分開業(yè)務(wù)組件放在各自頁面目錄下。邏輯復(fù)用優(yōu)先抽成composables而不是把所有代碼都堆在組件里。8.2 性能優(yōu)化注意點Vue3 性能優(yōu)化的重點不是炫技而是避免常見壞寫法。v-for一定要寫keykey 要穩(wěn)定唯一不要用數(shù)組下標(biāo)。模板中不要寫復(fù)雜表達(dá)式派生數(shù)據(jù)放到computed。大數(shù)據(jù)量列表優(yōu)先使用虛擬滾動不要一次渲染上萬條 DOM。組件和路由按需加載減少首屏體積。大型表單和嵌套組件注意避免不必要的重復(fù)渲染。shallowRef和shallowReactive是更細(xì)粒度的優(yōu)化手段適合管理大型對象且不需要深層響應(yīng)式的場景。零基礎(chǔ)可以先了解不急著在項目里使用。8.3 可復(fù)用清單環(huán)境檢查清單Node.js 版本是否為 18 以上。包管理器是否統(tǒng)一。npm run dev能正常啟動。npm run build能正常打包。接口地址是否按環(huán)境區(qū)分。瀏覽器開發(fā)者工具中 Vue Devtools 是否可用。發(fā)布前檢查清單路由是否懶加載。環(huán)境變量是否配置正確。登錄守衛(wèi)和權(quán)限控制是否完整。接口錯誤是否有全局提示。打包體積是否可接受。是否存在敏感信息硬編碼。學(xué)習(xí)自查清單能獨立創(chuàng)建并啟動 Vue3 項目。能寫一個帶響應(yīng)式狀態(tài)的組件。能實現(xiàn)父子組件通信。能完成路由配置和登錄攔截。能用 Pinia 管理全局登錄態(tài)。能排查一個真實報錯并說清原因。把這些清單保存下來每次學(xué)習(xí)一個模塊、每次發(fā)布一個項目、每次面試前都拿出來對照一遍比盲目刷視頻更有效。學(xué)習(xí) Vue3 最重要的判斷標(biāo)準(zhǔn)不是“看過多少集”而是“能獨立完成多少個最小閉環(huán)”。從環(huán)境搭建到組件通信從路由到狀態(tài)管理從項目打包到問題排查每完成一個閉環(huán)你對 Vue3 的掌控力就加深一層。下一步建議選擇一個真實業(yè)務(wù)場景用 Vue3 從頭落地一個小項目把路由、狀態(tài)、請求、權(quán)限都串起來。項目跑通之后再往 TypeScript、SSR、微前端這些方向擴(kuò)展會順理成章得多。