Vue 3 作為一款流行的前端框架，提供了豐富的特性和工具來構建現代化的用戶界面。以下是 Vue 3 的核心知識點分類總結，涵蓋基礎概念、響應式系統、組件化開發、狀態管理、路由、工具鏈及性能優化等方面：

一、核心概念與響應式系統

1、響應式基礎

ref 和 reactive：用于創建響應式數據，ref 包裝基本類型，reactive 包裝對象類型。

computed 和 watch：計算屬性自動依賴追蹤，watch 監聽數據變化并執行副作用邏輯。

toRefs 和 toRef：解構響應式對象時保持響應性，或單獨提取響應式屬性。

2、生命周期鉤子

組件生命周期：setup 替代 beforeCreate/created，onMounted、onUpdated、onUnmounted 等組合式 API 鉤子。

模板引用：通過 ref 獲取 DOM 元素或組件實例。

二、組件化開發

1、組件定義與注冊

單文件組件(SFC)：.vue 文件集成模板、腳本和樣式。

組合式 API：setup 函數中組織邏輯，支持代碼復用(如自定義 Hook)。

2、組件通信

Props 與 Emits：父組件通過 props 傳遞數據，子組件通過 emits 觸發事件。

Provide/Inject：跨層級組件通信，避免多層 props 傳遞。

插槽(Slots)：內容分發，支持作用域插槽傳遞數據。

3、高級組件

動態組件：通過 動態切換組件。

異步組件：結合 defineAsyncComponent 實現懶加載。

Teleport：將組件內容渲染到 DOM 任意位置(如模態框)。

三、狀態管理

1、Pinia(推薦)

模塊化 Store：通過 defineStore 定義狀態、動作和計算屬性。

插件支持：支持開發工具、持久化插件等。

2、Vuex(舊項目)

核心概念：state、mutations、actions、getters、modules。

四、路由管理

Vue Router 4

動態路由：/user/:id 匹配參數。

導航守衛：全局前置守衛、路由獨享守衛、組件內守衛控制路由跳轉。

路由懶加載：按需加載組件，減少初始包體積。

五、工具鏈與構建

1、Vite

極速開發體驗：基于原生 ES 模塊的構建工具，支持熱更新。

插件生態：擴展功能(如 Vue 插件)。

2、Vue CLI(舊項目)

項目腳手架：支持 Webpack 配置，適合復雜項目。

六、性能優化

1、虛擬 DOM 優化

v-once：靜態內容只渲染一次。

v-memo：條件性跳過子樹更新。

2、編譯優化

靜態提升：靜態節點提升到渲染函數外。

塊追蹤：標記動態節點，減少更新范圍。

3、Tree Shaking

按需引入：僅打包使用的代碼(如僅引入需要的 Pinia 模塊)。

七、其他特性

1、組合式函數(Composables)

復用邏輯：將通用邏輯(如分頁、表單驗證)封裝為可復用函數。

2、自定義指令

直接操作 DOM：如實現 v-focus 自動聚焦。

3、SSR/SSG 支持

Nuxt.js 3：基于 Vue 3 的 SSR 框架，支持靜態站點生成。

4、TypeScript 集成

類型推導：ref、reactive、props 等支持類型定義。

八、學習路徑建議

1、基礎掌握

熟悉響應式系統、組件通信、生命周期。

2、進階實踐

使用 Pinia 管理狀態，Vue Router 4 配置路由，Vite 搭建項目。

3、性能調優

學習虛擬 DOM 優化技巧，結合 Chrome DevTools 分析性能。

4、生態探索

嘗試 Nuxt.js 3、Vite 插件開發等高級場景。

通過系統學習以上知識點，開發者可以高效構建高性能、可維護的 Vue 3 應用。建議結合官方文檔和實際項目實踐，逐步深入掌握。