?一、Vue 基礎核心

1. 響應式原理

數據驅動：通過 ?data??定義響應式數據，視圖自動同步數據變化。

2、核心機制

• Object.defineProperty（Vue 2.x）或 Proxy（Vue 3.x）實現數據劫持。
• 依賴收集：追蹤數據與視圖的依賴關系，觸發精準更新。
• 虛擬 DOM（Virtual DOM）：對比新舊 VDOM 差異，最小化 DOM 操作。

3. 組件化開發

（1）單文件組件（.vue）:

• <templete>:HTML模板，支持插值表達式和指令。
• <script>:組件邏輯，選項式API和組合式API。
• <style>:組件樣式，支持scoped隔離樣式。

?（2）組件通信

• 父子組件：props父傳子$emit子傳父
• 跨組件：全局狀態管理工具，Vuex，Pinia，事件總線
• 插槽：內容分發。

4、指令系統

• v-bind?：綁定屬性（簡寫 ?:?，如 ?:class?、?:style?）。
• v-on?：綁定事件（簡寫 ?@?，如 ?@click?、?@input?）。
• v-model?：雙向數據綁定（表單元素常用）。
• v-if?/?v-else-if?/?v-else?：條件渲染。
• v-for?：列表渲染（需配合 ?:key??優化 diff 算法）。
• v-show?：控制元素顯示/隱藏（基于 CSS ?display?）。
• 自定義指令：通過 ?directives??配置，用于 DOM 操作（如權限控制、防抖）。

二、Vue 進階特性

1. 生命周期鉤子

• 創建階段：?beforeCreate?（實例剛創建，無數據）→? created?（數據初始化完成，可調用 API）。
• - 掛載階段：?beforeMount?（模板編譯前）→ ?mounted?（掛載到 DOM 后，可操作 DOM）。
• - 更新階段：?beforeUpdate?（數據更新前）→ ?updated?（數據更新后，DOM 已同步）。
• - 卸載階段：?beforeUnmount?（卸載前）→ ?unmounted?（組件銷毀后，清理定時器等）。
• - 錯誤處理：?errorCaptured?（捕獲子組件錯誤）。

2、計算屬性和監聽屬性

• computed：基于以來緩存結果，只有依賴變化時才會重新計算。
• watch：監聽特定數據變化，執行異步或復雜邏輯。

3、過渡和動畫

• 內置組件：?<transition>?（單元素/組件過渡）、?<transition-group>?（列表過渡）。
• CSS 類名：?v-enter?/?v-enter-active??等，配合 CSS 動畫或第三方庫（如 Animate.css）。
• JavaScript 鉤子：?before-enter?、?after-enter??等，可自定義 JS 動畫。

4. 路由管理

• ?聲明式導航：?<router-link to="/path">??跳轉，?<router-view>??渲染組件。
• ?路由模式：?hash?（默認，兼容性好）、?history?（需服務端配置）。
• ?動態路由：?:id??匹配參數（如 ?/user/:id?），通過 ?$route.params??訪問。
• ?路由守衛：全局守衛（?router.beforeEach?）、組件內守衛（?beforeRouteEnter?）。
• ?嵌套路由：通過 ?children??配置多級路由（如 ?/user/1/profile?）。

三、Vue生態和周邊

1、狀態管理工具

• Vuex：state?（狀態）、?mutations?（同步修改）、?actions?（異步邏輯）、?getters?（計算屬性）。
• Pinia：輕量級、支持組合式 API（?setup??語法糖），替代 Vuex 的趨勢。

2、構建工具與工程化

• Vue CLI：官方腳手架，一鍵搭建項目（配置 Webpack/Vite、Babel 等）。
• Vite：基于 ES Module 的極速構建工具，適合 Vue 3.x 項目（開發環境無需打包）。
• TypeScript 支持：Vue 3.x 內置 TypeScript 類型定義，?defineComponent??推斷組件類型。

3、常用組件庫

• Element UI（Vue 2）/ Element Plus（Vue 3）：PC 端組件庫。
• Vuetify：Material 風格組件庫，支持響應式設計。
• Naive UI：輕量、美觀的 Vue 3 組件庫。

4、常用工具庫

• Axios：HTTP 請求庫（封裝 ?this.$axios??或 ?useAxios?）。
• Lodash：常用函數庫（防抖 ?debounce?、節流 ?throttle??等）。
• Dayjs：輕量級日期處理庫。

5、全棧與服務端渲染

• Nuxt.js：Vue 生態 SSR 框架，支持靜態站點生成和服務器端渲染，簡化 SEO 和首屏加載。
• Express/Koa + Vue：手動實現 SSR（需處理數據預取、狀態同步等）。

四、Vue3?新特性

1、Composition API

setup??函數：替代 Vue 2 的 ?options API?，邏輯復用更靈活（?ref?/?reactive??定義響應式數據）。
組合函數（Hook）：自定義邏輯復用（如 ?useMousePosition?）。

?2、Teleport（傳送門）

將組件模板渲染到 DOM 任意位置（如模態窗掛載到 ?body??下）。

3、Suspense

處理異步依賴（如動態組件加載），支持 ?loading??和 ?fallback??狀態。

4、響應式系統升級

基于 ?Proxy??實現，支持原生數組和對象嵌套，性能更優。

五、學習路徑建議

• 入門：掌握基礎語法（模板、指令、組件）、生命周期、Vue Router。
• 進階：深入響應式原理、組合式 API、狀態管理（Pinia）、自定義指令。
• 實戰：開發中小型項目（如博客、電商），結合組件庫和工程化工具。
• 拓展：學習 SSR（Nuxt.js）、單元測試（Jest/Vitest）、性能優化（虛擬列表、懶加載）。