很多剛接觸 Vue3 的同學(xué)都有這樣一種感受網(wǎng)上免費(fèi)教程很多但大部分要么只講一兩個(gè) API要么直接丟一個(gè)復(fù)雜后臺(tái)項(xiàng)目新手看著看著就跟不上了。好不容易看完一套視頻自己動(dòng)手寫(xiě)項(xiàng)目時(shí)還是不知道路由、狀態(tài)管理、接口請(qǐng)求怎么組合在一起。這篇文章不說(shuō)廢話直接給你一條從零基礎(chǔ)到能寫(xiě) Vue3 項(xiàng)目的學(xué)習(xí)路徑按照 5 小時(shí)的節(jié)奏來(lái)拆解配環(huán)境、講語(yǔ)法、寫(xiě)案例、列排錯(cuò)思路盡量讓你跟著做就能跑起來(lái)。Vue3 不是只有幾個(gè)新語(yǔ)法而是一整套設(shè)計(jì)思路的變化。你會(huì)發(fā)現(xiàn)以前寫(xiě) Vue2 習(xí)慣的 data、methods、computed 分塊寫(xiě)法到了 Vue3 中變成 setup 函數(shù)里的“按邏輯組織”。表面上只是寫(xiě)法變了實(shí)際上是組件邏輯復(fù)用和工程化能力的大幅升級(jí)。本文會(huì)用通俗的語(yǔ)言解釋概念再給可運(yùn)行的代碼最后用一個(gè)待辦管理頁(yè)面把 Vue Router、Pinia、Axios 串起來(lái)。1. Vue3 到底是什么為什么要學(xué)它1.1 Vue3 解決的核心問(wèn)題Vue3 是 Vue.js 的下一代主要版本。相比 Vue2它的底層響應(yīng)式系統(tǒng)從 Object.defineProperty 換成了 ES6 的 Proxy這讓數(shù)據(jù)監(jiān)聽(tīng)更完整性能也更好。更重要的是Vue3 從設(shè)計(jì)層面把“組合式 API”作為推薦寫(xiě)法讓組件內(nèi)相關(guān)邏輯可以放在一起而不是強(qiáng)行走 data、methods、computed、watch 的固定分區(qū)。舉個(gè)例子在 Vue2 中一個(gè)業(yè)務(wù)模塊可能要改 data 里的一個(gè)值、methods 里的一個(gè)方法、watch 里的一個(gè)監(jiān)聽(tīng)器、computed 里的一個(gè)派生屬性這些代碼被分散在四個(gè)區(qū)域。如果業(yè)務(wù)復(fù)雜你需要在組件里上下翻找。Vue3 的 setup 或script setup允許你按照功能模塊寫(xiě)代碼比如搜索功能相關(guān)的狀態(tài)、方法、監(jiān)聽(tīng)都放一起閱讀和維護(hù)成本明顯降低。1.2 Vue2 與 Vue3 的核心差異從 Vue2 升級(jí)到 Vue3不只是版本號(hào)變了。下面這張表列出的差異是面試和實(shí)際開(kāi)發(fā)中最常遇到的維度Vue2Vue3響應(yīng)式原理Object.defineProperty需遞歸遍歷對(duì)象屬性Proxy 代理支持新增屬性和刪除屬性監(jiān)聽(tīng)數(shù)據(jù)聲明data() 返回普通對(duì)象ref / reactive / shallowRef 等邏輯復(fù)用mixins命名沖突風(fēng)險(xiǎn)高組合式函數(shù)Composables依靠普通函數(shù)組合API 風(fēng)格選項(xiàng)式 APIOptions API選項(xiàng)式仍兼容推薦組合式 API性能虛擬 DOM 優(yōu)化有限靜態(tài)節(jié)點(diǎn)提升、事件緩存、更快的 diff路由推薦Vue Router 3Vue Router 4狀態(tài)管理Vuex 3Pinia 成為官方推薦構(gòu)建工具webpack 為主Vite 成為官方推薦的開(kāi)發(fā)構(gòu)建工具TypeScript支持較弱源碼用 TS 重寫(xiě)類(lèi)型推導(dǎo)更好對(duì)新手來(lái)說(shuō)最直觀的感受是新建一個(gè) Vue3 組件代碼長(zhǎng)這樣template div{{ message }}/div /template script setup import { ref } from vue const message ref(Hello Vue3) /script沒(méi)有 data 選項(xiàng)沒(méi)有 methods 選項(xiàng)一個(gè)script setup就能把邏輯全部寫(xiě)清楚。不要小看這個(gè)變化它從根本上改變了組件拆分和復(fù)用的方式。1.3 5 小時(shí)學(xué)習(xí)路線怎么安排5 小時(shí)不是說(shuō)你必須連續(xù)不斷學(xué) 5 小時(shí)而是把你的學(xué)習(xí)內(nèi)容按優(yōu)先級(jí)拆開(kāi)避免在細(xì)枝末節(jié)上浪費(fèi)時(shí)間。建議按下面這個(gè)節(jié)奏來(lái)第 1 小時(shí)搭建 Vue3 項(xiàng)目理解 Vite 和項(xiàng)目目錄結(jié)構(gòu)跑通第一個(gè)頁(yè)面。第 2 小時(shí)掌握組合式 API 核心重點(diǎn)學(xué) ref、reactive、computed、watch。第 3 小時(shí)學(xué)習(xí)組件通信、生命周期、自定義指令和 provide/inject。第 4 小時(shí)學(xué)習(xí) Vue Router 和 Pinia做一個(gè)多頁(yè)面應(yīng)用。第 5 小時(shí)封裝 Axios 請(qǐng)求聯(lián)調(diào)接口整理常見(jiàn)報(bào)錯(cuò)。這套路線不追求覆蓋所有冷門(mén) API而是先構(gòu)建一個(gè)能寫(xiě)項(xiàng)目的知識(shí)骨架。當(dāng)你把本文的示例代碼都手敲一遍再看官方文檔時(shí)很多概念都會(huì)變得容易理解。2. 環(huán)境準(zhǔn)備用 Vite 創(chuàng)建第一個(gè) Vue3 項(xiàng)目2.1 需要安裝什么寫(xiě) Vue3 項(xiàng)目核心環(huán)境只需要一個(gè) Node.js。本文示例使用 npm 作為包管理器你也可以用 pnpm 或 yarn原理一樣。Node.js 版本建議安裝當(dāng)前 LTS 穩(wěn)定版至少保證在 18 以上。版本過(guò)低會(huì)導(dǎo)致 Vite 或依賴安裝失敗。不確定自己 Node 版本的可以在命令行執(zhí)行node -v npm -v能輸出版本號(hào)就說(shuō)明 Node 環(huán)境正常。如果沒(méi)有安裝去 Node.js 官網(wǎng)下載對(duì)應(yīng)系統(tǒng)的安裝包一路默認(rèn)安裝即可。注意不要在生產(chǎn)服務(wù)器上隨意升級(jí) Node要先確認(rèn)項(xiàng)目依賴的兼容性。2.2 創(chuàng)建 Vue3 項(xiàng)目創(chuàng)建項(xiàng)目推薦使用 create-vite 腳手架。在命令行執(zhí)行npm create vitelatest vue3-quickstart -- --template vue執(zhí)行后會(huì)自動(dòng)生成 vue3-quickstart 目錄。進(jìn)入目錄并安裝依賴cd vue3-quickstart npm install啟動(dòng)開(kāi)發(fā)服務(wù)器npm run dev終端會(huì)出現(xiàn)類(lèi)似下面的提示VITE v5.x.x ready in xxx ms ? Local: http://localhost:5173/打開(kāi) http://localhost:5173/如果能看到 Vite Vue 的默認(rèn)頁(yè)面就算環(huán)境搭建成功。安裝 Vue Router、Pinia 和 Axiosnpm install vue-router4 npm install pinia npm install axios這里要說(shuō)明的是依賴版本會(huì)隨著時(shí)間更新本文以當(dāng)前穩(wěn)定版為例。如果你的終端提示某些包版本沖突優(yōu)先檢查 Node 版本再統(tǒng)一升級(jí)相關(guān)依賴不要盲目刪除 lock 文件。2.3 項(xiàng)目目錄結(jié)構(gòu)說(shuō)明新生成的 Vue3 項(xiàng)目結(jié)構(gòu)看起來(lái)可能有點(diǎn)復(fù)雜但核心目錄就幾個(gè)vue3-quickstart ├── index.html ├── package.json ├── vite.config.js └── src ├── main.js ├── App.vue ├── components ├── views ├── router ├── stores └── assetsindex.html頁(yè)面入口Vue 應(yīng)用會(huì)掛載到這個(gè) HTML 里的#app節(jié)點(diǎn)上。src/main.js應(yīng)用入口文件負(fù)責(zé)創(chuàng)建應(yīng)用、注冊(cè)插件。src/App.vue根組件所有頁(yè)面最終渲染在它內(nèi)部。src/components公共組件目錄建議按業(yè)務(wù)模塊繼續(xù)劃分子目錄。src/router路由配置目錄。src/stores狀態(tài)管理目錄Pinia 的 store 可以放這里。src/assets靜態(tài)資源圖片、公共樣式可以放這里。新手最容易犯的錯(cuò)誤是在 App.vue 里寫(xiě)大量業(yè)務(wù)邏輯。實(shí)際上App.vue 應(yīng)該保持簡(jiǎn)單只負(fù)責(zé)布局和路由出口。3. Vue3 核心語(yǔ)法拆解3.1 setup 與 script setup在 Vue3 組件中setup是組合式 API 的入口。你可以把它理解為“組件開(kāi)始初始化時(shí)執(zhí)行的一段代碼”。最直接的寫(xiě)法是script import { ref } from vue export default { setup() { const count ref(0) return { count } } } /script這種寫(xiě)法需要手動(dòng) return 模板中要用到的變量寫(xiě)起來(lái)還是有點(diǎn)繁瑣。所以 Vue3.2 之后推薦script setup它會(huì)自動(dòng)把頂層變量暴露給模板script setup import { ref } from vue const count ref(0) /script從剛才的代碼可以看出script setup是在普通 setup 之上的語(yǔ)法糖。它最大的優(yōu)點(diǎn)是不需要 return模板直接使用變量。這也意味著在script setup中引入的組件、聲明的變量、函數(shù)都可以在模板中直接使用代碼更簡(jiǎn)潔。有一點(diǎn)需要特別注意script setup中不要使用export default它是通過(guò)編譯時(shí)處理完成的不能混用普通選項(xiàng)式導(dǎo)出的寫(xiě)法。3.2 ref 與 reactive兩種響應(yīng)式數(shù)據(jù)聲明響應(yīng)式數(shù)據(jù)是 Vue 的核心概念。所謂響應(yīng)式就是當(dāng)數(shù)據(jù)變化時(shí)引用它的頁(yè)面區(qū)域會(huì)自動(dòng)更新。Vue3 中最常用的兩個(gè) API 是 ref 和 reactive。ref 聲明基礎(chǔ)類(lèi)型和對(duì)象ref 可以聲明基礎(chǔ)類(lèi)型也可以包裹對(duì)象。它的特點(diǎn)是在 Script 中操作值時(shí)必須用.value在模板中 Vue 會(huì)自動(dòng)解包不需要寫(xiě).value。script setup import { ref } from vue const name ref(張三) const user ref({ age: 18 }) function changeName() { name.value 李四 user.value.age 20 } /script template div{{ name }}/div div{{ user.age }}/div button clickchangeName修改/button /template這里最容易出錯(cuò)的地方是在 JavaScript 中直接寫(xiě)name 李四是不生效的。因?yàn)?ref 返回的是一個(gè)包裝后的對(duì)象真正的值在.value上。模板中的自動(dòng)解包只是方便模板語(yǔ)法不影響 Script 中的使用規(guī)則。reactive 聲明純對(duì)象reactive 接收一個(gè)普通對(duì)象返回一個(gè)響應(yīng)式代理對(duì)象。它的特點(diǎn)是操作屬性時(shí)不用.valuescript setup import { reactive } from vue const state reactive({ count: 0, list: [] }) function add() { state.count state.list.push(state.count) } /scriptreactive 更適合聲明深度嵌套的對(duì)象。但要注意它不能直接替換整個(gè)對(duì)象因?yàn)?reactive 是基于 Proxy 的代理直接重新賦值會(huì)讓代理關(guān)系失效?，F(xiàn)實(shí)項(xiàng)目中我更推薦“能用 ref 就用 ref”。ref 更統(tǒng)一支持各種類(lèi)型而且現(xiàn)在很多人已經(jīng)習(xí)慣xxx.value的寫(xiě)法。reactive 適合用于集中定義一整塊對(duì)象模型比如表單模型。3.3 computed 計(jì)算屬性computed 用于聲明派生數(shù)據(jù)。它的本質(zhì)是根據(jù)已有響應(yīng)式數(shù)據(jù)計(jì)算出一個(gè)新值并且這個(gè)新值有緩存只有依賴的數(shù)據(jù)變化時(shí)才會(huì)重新計(jì)算。script setup import { ref, computed } from vue const price ref(100) const count ref(2) const total computed(() price.value * count.value) /script template div總價(jià){{ total }}/div /templatetotal 不需要寫(xiě).value因?yàn)樵谀０逯袝?huì)自動(dòng)解包。如果你在 computed 中修改了依賴的數(shù)據(jù)total 會(huì)自動(dòng)更新但 total 本身不建議被手動(dòng)修改。computed 的核心作用是避免在模板中寫(xiě)復(fù)雜表達(dá)式讓模板保持干凈。3.4 watch 監(jiān)聽(tīng)器watch 用來(lái)監(jiān)聽(tīng)響應(yīng)式數(shù)據(jù)的變化適合處理異步操作、副作用或需要關(guān)聯(lián)更新的場(chǎng)景。script setup import { ref, watch } from vue const keyword ref() watch(keyword, (newValue, oldValue) { console.log(搜索詞變化, oldValue, -, newValue) }) /script如果要監(jiān)聽(tīng)多個(gè)數(shù)據(jù)可以傳數(shù)組watch([keyword, page], ([newKeyword, newPage], [oldKeyword, oldPage]) { // 處理多個(gè)數(shù)據(jù)變化 })如果你需要在監(jiān)聽(tīng)時(shí)立即執(zhí)行一次回調(diào)可以傳入第三個(gè)參數(shù)watch(keyword, (newValue) { console.log(立即執(zhí)行一次后續(xù)變化也會(huì)觸發(fā)) }, { immediate: true })還有一種 watchEffect它會(huì)自動(dòng)收集回調(diào)中用到的響應(yīng)式數(shù)據(jù)數(shù)據(jù)變化時(shí)自動(dòng)重新執(zhí)行。它不需要手動(dòng)指定依賴適合不需要關(guān)心舊值的場(chǎng)景。3.5 生命周期函數(shù)Vue3 的生命周期與 Vue2 類(lèi)似但名稱發(fā)生了變化并且只能在 setup 中調(diào)用Vue2Vue3beforeCreate不需要setup 直接替換created不需要setup 直接替換beforeMountonBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeUnmountonBeforeUnmountunmountedonUnmounted最常見(jiàn)的用法是 onMounted 中請(qǐng)求接口script setup import { onMounted } from vue import { fetchTodoList } from ../api/todo onMounted(() { fetchTodoList() }) /script注意生命周期函數(shù)注冊(cè)時(shí)不能使用await包裹外層否則同步注冊(cè)時(shí)機(jī)就變了。如果要在 mounted 中做異步操作直接在回調(diào)里寫(xiě) async 函數(shù)即可。3.6 組件通信Vue3 的組件通信方式非常多新手一開(kāi)始容易混淆。實(shí)際項(xiàng)目中掌握這幾種就夠了父?jìng)髯觗efineProps子組件通過(guò) defineProps 聲明接收的屬性!-- 子組件 TodoItem.vue -- script setup const props defineProps({ title: { type: String, required: true }, done: { type: Boolean, default: false } }) /script template div :class{ done } {{ title }} /div /template在父組件中這樣使用TodoItem title學(xué)習(xí) Vue3 :donetrue /子傳父defineEmits子組件聲明要觸發(fā)的事件script setup const emit defineEmits([change]) function handleClick() { emit(change, 參數(shù)值) } /script父組件監(jiān)聽(tīng)TodoItem changehandleChange /跨層級(jí)通信provide / inject當(dāng)祖先組件和后代組件之間跨多個(gè)層級(jí)時(shí)用 provide 提供數(shù)據(jù)用 inject 接收數(shù)據(jù)。父組件script setup import { provide, ref } from vue const theme ref(light) provide(theme, theme) /script任意后代組件script setup import { inject } from vue const theme inject(theme) /scriptprovide/inject 不是響應(yīng)式傳值時(shí)就傳一個(gè) ref 或 reactive后續(xù)修改會(huì)自動(dòng)聯(lián)動(dòng)。如果不小心傳成了普通字符串后代是拿不到實(shí)時(shí)更新的。3.7 自定義指令與全局注冊(cè)自定義指令在 Vue3 中仍然保留。比如我們需要一個(gè)自動(dòng)聚焦輸入框的指令// src/directives/index.js export const vFocus { mounted: (el) { el.focus() } }在 main.js 中全局注冊(cè)// src/main.js import { createApp } from vue import App from ./App.vue import { vFocus } from ./directives const app createApp(App) app.directive(focus, vFocus) app.mount(#app)組件模板中直接使用input v-focus placeholder請(qǐng)輸入內(nèi)容 /自定義指令適合處理 DOM 層面的通用邏輯比如權(quán)限按鈕控制、水印生成、點(diǎn)擊外部關(guān)閉等。但如果是純粹的業(yè)務(wù)邏輯優(yōu)先用組件和組合式函數(shù)不要什么都塞進(jìn)指令里。4. 實(shí)戰(zhàn)案例快速搭建一個(gè)待辦管理頁(yè)面4.1 需求分析與功能拆分到這里我們把前面的知識(shí)點(diǎn)串起來(lái)做一個(gè)最小的“待辦管理”頁(yè)面。這個(gè)案例會(huì)用到Vue Router 配置頁(yè)面路由。Pinia 管理待辦狀態(tài)。Axios 做接口請(qǐng)求。組件化列表項(xiàng)組件。ref、computed、onMounted、自定義指令。頁(yè)面功能如下輸入框新增待辦事項(xiàng)。列表展示待辦點(diǎn)擊切換完成狀態(tài)。刪除待辦。統(tǒng)計(jì)總數(shù)和已完成數(shù)量。4.2 創(chuàng)建路由與頁(yè)面骨架在 src 下創(chuàng)建 router 目錄新建 index.js// src/router/index.js import { createRouter, createWebHistory } from vue-router import TodoHome from ../views/TodoHome.vue const router createRouter({ history: createWebHistory(), routes: [ { path: /, name: Home, component: TodoHome } ] }) export default router修改 main.js注冊(cè) Router 和 Pinia// src/main.js import { createApp } from vue import { createPinia } from pinia import App from ./App.vue import router from ./router import { vFocus } from ./directives const app createApp(App) app.use(createPinia()) app.use(router) app.directive(focus, vFocus) app.mount(#app)創(chuàng)建頁(yè)面文件 src/views/TodoHome.vuetemplate main classtodo-page h1待辦事項(xiàng)/h1 div classinput-row input v-modelnewTodo v-focus placeholder輸入待辦內(nèi)容 keyup.enterhandleAdd / button clickhandleAdd新增/button /div p進(jìn)度{{ store.doneCount }} / {{ store.total }}/p ul li v-foritem in store.todos :keyitem.id :class{ done: item.done } span{{ item.title }}/span button clickstore.toggleTodo(item.id)切換/button button clickstore.removeTodo(item.id)刪除/button /li /ul /main /template script setup import { ref } from vue import { useTodoStore } from ../stores/todo const store useTodoStore() const newTodo ref() function handleAdd() { const text newTodo.value.trim() if (!text) { alert(請(qǐng)輸入待辦內(nèi)容) return } store.addTodo(text) newTodo.value } /script style scoped .todo-page { max-width: 600px; margin: 40px auto; } .input-row { display: flex; gap: 8px; margin-bottom: 12px; } li.done span { text-decoration: line-through; color: #999; } /style這里使用了store.doneCount和store.total這兩個(gè)是 Pinia 中的 getter。下面來(lái)編寫(xiě) store。4.3 使用 Pinia 管理待辦狀態(tài)在 src 下創(chuàng)建 stores 目錄新建 todo.js// src/stores/todo.js import { defineStore } from pinia export const useTodoStore defineStore(todo, { state: () ({ todos: [], loading: false }), getters: { total: (state) state.todos.length, doneCount: (state) state.todos.filter((item) item.done).length }, actions: { async fetchTodos() { this.loading true // 模擬請(qǐng)求后續(xù)可替換為 axios 調(diào)用 const mockData [ { id: 1, title: 學(xué)習(xí) Vue3 基礎(chǔ)語(yǔ)法, done: true }, { id: 2, title: 完成待辦管理頁(yè)面, done: false } ] await new Promise((resolve) setTimeout(resolve, 200)) this.todos mockData this.loading false }, addTodo(title) { const newItem { id: Date.now(), title, done: false } this.todos.push(newItem) }, toggleTodo(id) { const item this.todos.find((todo) todo.id id) if (item) { item.done !item.done } }, removeTodo(id) { this.todos this.todos.filter((todo) todo.id ! id) } } })在 TodoHome.vue 的 onMounted 中調(diào)用 fetchTodosscript setup import { onMounted, ref } from vue import { useTodoStore } from ../stores/todo const store useTodoStore() const newTodo ref() onMounted(() { store.fetchTodos() }) function handleAdd() { // ... } /scriptPinia 的狀態(tài)被組件調(diào)用后組件與 store 之間會(huì)自動(dòng)建立響應(yīng)式關(guān)系。所以 store.todos 變化時(shí)頁(yè)面上的 v-for 列表也會(huì)自動(dòng)更新。這里不需要額外的事件訂閱或手動(dòng)刷新。4.4 接口請(qǐng)求封裝Axios 示例業(yè)務(wù)項(xiàng)目里不可能一直用 mock 數(shù)據(jù)。下面演示 Axios 的基礎(chǔ)封裝方式。創(chuàng)建 src/utils/request.js// src/utils/request.js import axios from axios const request axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL || /api, timeout: 10000 }) // 請(qǐng)求攔截器可以在這里統(tǒng)一加 Token request.interceptors.request.use( (config) { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config }, (error) Promise.reject(error) ) // 響應(yīng)攔截器統(tǒng)一處理錯(cuò)誤碼 request.interceptors.response.use( (response) response.data, (error) { // 實(shí)際項(xiàng)目中按后端約定處理 return Promise.reject(error) } ) export default request把剛才 store 中的 mock 數(shù)據(jù)替換為真實(shí)請(qǐng)求// src/stores/todo.js import { defineStore } from pinia import request from ../utils/request export const useTodoStore defineStore(todo, { state: () ({ todos: [], loading: false }), getters: { total: (state) state.todos.length, doneCount: (state) state.todos.filter((item) item.done).length }, actions: { async fetchTodos() { this.loading true try { const res await request.get(/todos) this.todos res } finally { this.loading false } }, async addTodo(title) { const res await request.post(/todos, { title }) this.todos.push(res) }, async toggleTodo(id) { const item this.todos.find((todo) todo.id id) if (!item) return await request.put(/todos/${id}, { done: !item.done }) item.done !item.done }, async removeTodo(id) { await request.delete(/todos/${id}) this.todos this.todos.filter((todo) todo.id ! id) } } })這套代碼是真實(shí)項(xiàng)目中非常常見(jiàn)的模式。注意 fetchTodos 中使用 try/finally確保請(qǐng)求無(wú)論成功還是失敗都會(huì)關(guān)閉 loading 狀態(tài)。你在本地模擬階段可以用 json-server、Mock.js 或者后端聯(lián)調(diào)地址來(lái)測(cè)試。4.5 運(yùn)行與驗(yàn)證運(yùn)行項(xiàng)目npm run dev打開(kāi)頁(yè)面后你會(huì)看到待辦列表、完成進(jìn)度、新增輸入框。點(diǎn)擊“切換”按鈕文字會(huì)出現(xiàn)刪除線點(diǎn)擊“刪除”按鈕對(duì)應(yīng)項(xiàng)會(huì)消失。這個(gè)例子雖然簡(jiǎn)單但已經(jīng)把 Vue3 的響應(yīng)式、組件通信、狀態(tài)管理、路由和請(qǐng)求封裝覆蓋到了一半以上。如果你使用的是 mock 數(shù)據(jù)看不到網(wǎng)絡(luò)請(qǐng)求是正常的。改成 Axios 版本后打開(kāi)瀏覽器控制臺(tái)的 Network 面板就能看到請(qǐng)求記錄。遇到跨域問(wèn)題時(shí)可以在 vite.config.js 中配置代理// vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()], server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })這樣前端請(qǐng)求/api/todos時(shí)Vite 開(kāi)發(fā)服務(wù)器會(huì)轉(zhuǎn)發(fā)到本地后端服務(wù)避免瀏覽器跨域限制。5. 高頻問(wèn)題與排查思路5.1 數(shù)據(jù)修改了頁(yè)面卻不更新問(wèn)題現(xiàn)象常見(jiàn)原因解決思路頁(yè)面沒(méi)有響應(yīng)控制臺(tái)也沒(méi)有報(bào)錯(cuò)使用 ref 后忘記.value檢查 Script 中是否寫(xiě)xxx.value對(duì)象新增屬性不生效Vue2 習(xí)慣帶入 Vue3但 Vue3 Proxy 已支持確認(rèn)使用的是 reactive 或 ref 包裹的對(duì)象整個(gè) reactive 對(duì)象被重新賦值直接覆蓋了 Proxy 對(duì)象改為給對(duì)象內(nèi)部屬性賦值或用 ref 替代數(shù)組通過(guò)下標(biāo)修改不更新使用了非響應(yīng)式的普通數(shù)組使用 ref/reactive 包裹用 splice/push 或整體替換最常見(jiàn)的其實(shí)是第一次寫(xiě)組合式 API 時(shí)忘記.value。如果你在函數(shù)中寫(xiě)了const count ref(0) function add() { count 1 // 錯(cuò)誤 }count 在 Script 中是一個(gè) RefImpl 對(duì)象直接加 1 沒(méi)有意義。正確寫(xiě)法是count.value 1。而模板中寫(xiě){{ count }}時(shí)Vue 會(huì)幫你自動(dòng)解包所以模板里不需要.value。這是新手最容易懵的點(diǎn)。5.2 Vite 啟動(dòng)失敗或依賴安裝報(bào)錯(cuò)問(wèn)題現(xiàn)象常見(jiàn)原因解決思路運(yùn)行 npm run dev 提示 out of memory多個(gè)項(xiàng)目占用資源關(guān)閉多余服務(wù)或調(diào)整 Node 內(nèi)存限制Node Sass / node-sass 報(bào)錯(cuò)Vue3 項(xiàng)目中不推薦 node-sass改用 sassdart-sass安裝依賴后啟動(dòng)報(bào)語(yǔ)法錯(cuò)誤Node 版本過(guò)低升級(jí) Node 到 LTS 版本vite 命令找不到依賴沒(méi)裝完刪除 node_modules 和 package-lock.json重新安裝處理依賴問(wèn)題不要一上來(lái)就刪除 lock 文件這個(gè)文件記錄著依賴版本關(guān)系隨意刪除容易導(dǎo)致版本不一致。優(yōu)先嘗試npm install如果仍然失敗再考慮清理 node_modules 后全新安裝。5.3 路由跳轉(zhuǎn)后組件不刷新這個(gè)問(wèn)題在面試和業(yè)務(wù)開(kāi)發(fā)中都很常見(jiàn)。比如從/user/1跳轉(zhuǎn)到/user/2如果兩個(gè)路由使用了同一個(gè)組件實(shí)例Vue 會(huì)復(fù)用組件不會(huì)重新執(zhí)行 mounted 或 created所以頁(yè)面數(shù)據(jù)不會(huì)刷新。解決方法有兩種第一種在組件內(nèi)監(jiān)聽(tīng)路由參數(shù)變化import { watch } from vue import { useRoute } from vue-router const route useRoute() watch( () route.params.id, (newId) { // 根據(jù)新 id 重新請(qǐng)求數(shù)據(jù) fetchDetail(newId) } )第二種使用路由守衛(wèi)import { onBeforeRouteUpdate } from vue-router onBeforeRouteUpdate((to, from) { // 處理參數(shù)變化 })不是所有路由跳轉(zhuǎn)都會(huì)遇到這個(gè)問(wèn)題只有同一個(gè)組件被復(fù)用時(shí)才需要處理。5.4 defineProps 使用報(bào)錯(cuò)在script setup中defineProps 是編譯宏不需要導(dǎo)入。但如果把 defineProps 當(dāng)作普通函數(shù)調(diào)用或者在選項(xiàng)式 API 中使用就會(huì)報(bào)錯(cuò)。正確寫(xiě)法script setup const props defineProps({ title: String }) console.log(props.title) /script模板中直接使用 title不需要props.title。如果你在模板中寫(xiě)了props.title也沒(méi)有錯(cuò)但沒(méi)必要。defineProps 中的屬性校驗(yàn)類(lèi)型可以用 String、Number、Boolean、Object、Array 等。使用 Boolean 類(lèi)型時(shí)父組件傳入:donefalse時(shí)模板表現(xiàn)正常但如果只是傳TodoItem done /值會(huì)是 true這是 Vue 對(duì)布爾屬性的特殊處理。6. 工程實(shí)踐與進(jìn)階方向6.1 組件拆分與命名規(guī)范剛學(xué)完 Vue3 后很容易把頁(yè)面代碼全部堆在一個(gè)文件里比如在 TodoHome.vue 里同時(shí)寫(xiě)表單、列表、彈窗、分頁(yè)。前期這樣寫(xiě)確實(shí)快但項(xiàng)目變大后會(huì)非常痛苦。比較好的習(xí)慣是views 目錄放頁(yè)面級(jí)組件一個(gè) url 對(duì)應(yīng)一個(gè) views 文件。components 目錄放業(yè)務(wù)組件和通用組件按模塊分子目錄。通用組件使用 Base、App、Ui 開(kāi)頭比如 BaseButton、BaseModal。業(yè)務(wù)組件命名盡量貼近業(yè)務(wù)含義比如 TodoItem、UserSearchForm。涉及復(fù)雜狀態(tài)邏輯時(shí)抽成組合式函數(shù)到 src/composables 目錄。組合式函數(shù)是 Vue3 最推薦的邏輯復(fù)用方式。比如待辦列表的加載邏輯可以抽成// src/composables/useTodoList.js import { ref } from vue import request from ../utils/request export function useTodoList() { const todos ref([]) const loading ref(false) async function fetchTodos() { loading.value true try { const res await request.get(/todos) todos.value res } finally { loading.value false } } return { todos, loading, fetchTodos } }組件里只需要一行調(diào)用import { useTodoList } from ../composables/useTodoList const { todos, loading, fetchTodos } useTodoList()這種方式比 mixins 更清晰因?yàn)椴簧婕懊臻g的合并邏輯來(lái)源一目了然。6.2 狀態(tài)管理與接口層職責(zé)很多初學(xué)者會(huì)糾結(jié)一個(gè)問(wèn)題數(shù)據(jù)到底放在組件里還是 Pinia 里我的建議是優(yōu)先放組件等數(shù)據(jù)確實(shí)需要跨組件共享時(shí)再提升到 Pinia。把不需要共享的臨時(shí)表單內(nèi)容放進(jìn) Pinia只會(huì)讓全局狀態(tài)變得混亂。Pinia 中適合放這幾種數(shù)據(jù)用戶登錄信息、應(yīng)用配置、跨頁(yè)面共享的列表狀態(tài)、購(gòu)物車(chē)等。普通頁(yè)面內(nèi)部的搜索條件、臨時(shí)輸入框內(nèi)容用 ref 就夠了。接口請(qǐng)求不要散落在每個(gè)組件里。統(tǒng)一封裝 request 實(shí)例按業(yè)務(wù)模塊拆 api 文件比如 src/api/todo.js// src/api/todo.js import request from ../utils/request export function getTodoList() { return request.get(/todos) } export function createTodo(data) { return request.post(/todos, data) } export function updateTodo(id, data) { return request.put(/todos/${id}, data) } export function deleteTodo(id) { return request.delete(/todos/${id}) }組件只負(fù)責(zé)調(diào)用函數(shù)不關(guān)心請(qǐng)求地址和參數(shù)拼接方式。這樣后續(xù)接口改動(dòng)時(shí)只需要修改 api 層不會(huì)影響頁(yè)面。6.3 性能優(yōu)化優(yōu)先級(jí)新手不要一上來(lái)就追求極端性能優(yōu)化先把代碼寫(xiě)正確再關(guān)注性能。常用的優(yōu)化手段按重要程度排列組件狀態(tài)不要過(guò)度暴露給全局。長(zhǎng)列表使用 key 保持穩(wěn)定。v-for 和 v-if 不要同時(shí)用在同一個(gè)元素上。大數(shù)據(jù)列表考慮虛擬滾動(dòng)組件。大組件進(jìn)行異步加載Vue Router 路由懶加載。組件庫(kù)按需引入比如 Element Plus 或 Ant Design Vue 按需加載。圖片懶加載減少首屏網(wǎng)絡(luò)請(qǐng)求。路由懶加載是一個(gè)很容易實(shí)現(xiàn)且收益明顯的優(yōu)化。寫(xiě)法如下// src/router/index.js const router createRouter({ history: createWebHistory(), routes: [ { path: /, name: Home, component: () import(../views/TodoHome.vue) } ] })組件不再首屏全量加載而是訪問(wèn)對(duì)應(yīng)路由時(shí)才動(dòng)態(tài) import。6.4 從 Vue2 遷到 Vue3 的關(guān)注點(diǎn)如果你從 Vue2 項(xiàng)目遷移到 Vue3除了語(yǔ)法變化還需要關(guān)注幾個(gè)容易忽略的點(diǎn)filter 過(guò)濾器在 Vue3 中被移除建議改成計(jì)算屬性或方法。全局事件總線$on、$off在 Vue3 中移除推薦使用 mitt 或業(yè)務(wù)事件庫(kù)。自定義指令的鉤子名變化mounted 替代 bindunmounted 替代 unbind。v-model 用法調(diào)整組件上可以使用多個(gè) v-model比如v-model:title。插槽語(yǔ)法更統(tǒng)一推薦v-slot寫(xiě)法。Vuex 遷移到 Pinia 時(shí)把 state 寫(xiě)成函數(shù)getters 基本可以改成箭頭的寫(xiě)法mutations 被 actions 替代。同時(shí)遷移時(shí)不要一次性大范圍改代碼先升級(jí)構(gòu)建工具再逐組件替換 API。把 Vue2 和 Vue3 的差異表打印出來(lái)遇到問(wèn)題時(shí)對(duì)照排查效率會(huì)高很多。6.5 后續(xù)學(xué)習(xí)路線學(xué)完本文內(nèi)容你已經(jīng)可以寫(xiě)一個(gè)簡(jiǎn)單的 Vue3 應(yīng)用了。下一步更重要的是項(xiàng)目實(shí)戰(zhàn)建議這樣做把剛做的待辦管理頁(yè)面擴(kuò)展成一個(gè)小后臺(tái)加上登錄頁(yè)、列表頁(yè)、詳情頁(yè)用 Vue Router 做多頁(yè)面跳轉(zhuǎn)用 Pinia 保存登錄狀態(tài)用 Axios 對(duì)接真實(shí)接口。把你踩到的每一個(gè)坑記錄下來(lái)這是提升最快的方式。想系統(tǒng)深入的話可以繼續(xù)學(xué)習(xí) Composition API 的底層實(shí)現(xiàn)、Vue3 的編譯優(yōu)化原理、SSR 或 Nuxt3、移動(dòng)端跨端方案等。但不要把這些一次性鋪開(kāi)先把基礎(chǔ)項(xiàng)目做扎實(shí)后續(xù)學(xué)框架原理時(shí)才能理解為什么設(shè)計(jì)成這樣。如果你在學(xué)習(xí)過(guò)程中遇到“語(yǔ)法明明沒(méi)寫(xiě)錯(cuò)但頁(yè)面就是不對(duì)”的情況先不要懷疑 Vue 框架按照控制臺(tái)報(bào)錯(cuò)去檢查依賴版本、組件導(dǎo)入路徑和響應(yīng)式數(shù)據(jù)寫(xiě)法。大多數(shù)問(wèn)題都能在項(xiàng)目依賴和 API 使用方式上找到答案。把本文的示例代碼跟著敲一遍能運(yùn)行再嘗試改動(dòng)入門(mén)階段就足夠穩(wěn)了。