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