【Vue】Vue3 核心知识体系的全方位总结

文章目录

[Vue3 核心知识体系全景图](#Vue3 核心知识体系全景图)
- 一、核心设计理念与升级亮点
- - [1. 设计目标](#1. 设计目标)
  - [2. 与 Vue2 的核心区别](#2. 与 Vue2 的核心区别)
- 二、响应式系统（核心基石）
- - [1. 响应式原理：Proxy vs Object.defineProperty](#1. 响应式原理：Proxy vs Object.defineProperty)
  - [2. 核心响应式 API](#2. 核心响应式 API)
  - [3. 响应式进阶](#3. 响应式进阶)
- [三、Composition API（逻辑复用的革命）](#三、Composition API（逻辑复用的革命）)
- - [1. 核心入口：`setup` 函数](#1. 核心入口：setup 函数)
  - [2. 逻辑组织与复用：自定义 Hooks](#2. 逻辑组织与复用：自定义 Hooks)
  - [3. 与 Options API 的对比](#3. 与 Options API 的对比)
- 四、组件系统（增强与新特性）
- - [1. 组件定义](#1. 组件定义)
  - [2. Props & Emits 增强](#2. Props & Emits 增强)
  - [3. 插槽（Slot）新语法](#3. 插槽（Slot）新语法)
  - [4. 内置新组件](#4. 内置新组件)
  - [5. 动态与异步组件](#5. 动态与异步组件)
- 五、生命周期钩子
- - [1. Vue3 生命周期（与 Vue2 对应）](#1. Vue3 生命周期（与 Vue2 对应）)
  - [2. 新增调试钩子](#2. 新增调试钩子)
- 六、模板语法与指令
- - [1. 核心变化](#1. 核心变化)
  - [2. 常用指令](#2. 常用指令)
- [七、路由管理（Vue Router 4）](#七、路由管理（Vue Router 4）)
- - [1. 核心变化](#1. 核心变化)
  - [2. Composition API 中使用路由](#2. Composition API 中使用路由)
  - [3. 路由守卫](#3. 路由守卫)
- 八、状态管理（Pinia）
- - [1. 核心概念（替代 Vuex）](#1. 核心概念（替代 Vuex）)
  - [2. 基本使用](#2. 基本使用)
  - [3. 优势](#3. 优势)
- 九、性能优化
- - [1. 框架层面优化](#1. 框架层面优化)
  - [2. 开发层面优化技巧](#2. 开发层面优化技巧)
- [十、TypeScript 支持](#十、TypeScript 支持)
- - [1. 核心类型定义](#1. 核心类型定义)
  - [2. `<script setup>` 中的 TS 最佳实践](#2. <script setup> 中的 TS 最佳实践)
- 十一、生态与工具
- - [1. 构建工具：Vite](#1. 构建工具：Vite)
  - [2. 常用库](#2. 常用库)
  - [3. 调试工具](#3. 调试工具)
- 十二、最佳实践

Vue3 核心知识体系全景图

Vue3 以性能提升 、Composition API 、更好的 TypeScript 支持为核心，构建了更灵活、可维护的前端框架体系。以下是全方位结构化总结：

一、核心设计理念与升级亮点

1. 设计目标

性能优先：通过 Proxy 响应式、虚拟 DOM 优化实现更快的渲染速度。
可维护性：Composition API 解决大型项目逻辑复用难题。
渐进式框架：保留 Vue2 灵活性，同时支持更规范的工程化开发。

2. 与 Vue2 的核心区别

维度	Vue2	Vue3
响应式原理	Object.defineProperty	Proxy（性能更好、支持数组/对象深层监听）
API 风格	Options API（选项式）	Composition API（组合式，推荐）
组件根节点	仅支持单根节点	支持多根节点（Fragment）
TypeScript	支持有限	原生深度支持
新特性	无	Teleport、Suspense、Pinia

二、响应式系统（核心基石）

1. 响应式原理：Proxy vs Object.defineProperty

Vue2 ：通过 Object.defineProperty 劫持对象属性，需递归遍历、无法监听数组索引变化。
Vue3 ：使用 Proxy 代理整个对象，支持：
- 监听数组索引和长度变化；
- 监听对象属性的新增/删除；
- 懒监听（仅在访问时递归代理子对象）。

2. 核心响应式 API

API	作用	适用场景
`ref`	定义基本类型/对象的响应式数据	基本类型（数字、字符串）、需 `.value` 访问
`reactive`	定义对象/数组的响应式数据	复杂对象（无需 `.value`）
`computed`	计算属性（缓存结果）	依赖其他响应式数据的派生值
`watch`	监听特定数据变化（可获取旧值）	需要明确知道变化前后的值
`watchEffect`	自动追踪依赖并执行（无旧值）	只需响应数据变化执行副作用

3. 响应式进阶

toRef / toRefs ：将 reactive 对象的属性转为 ref，避免解构丢失响应性。
shallowRef / shallowReactive：浅层响应式（仅监听第一层属性），优化大型数据性能。
readonly：创建只读响应式对象，防止意外修改。

三、Composition API（逻辑复用的革命）

1. 核心入口：`setup` 函数

执行时机：在组件创建之前（beforeCreate 之前），无 this。
返回值：可直接在模板中使用的响应式数据/方法。
<script setup> 语法糖：简化 setup 写法，自动导入、无需 return。

2. 逻辑组织与复用：自定义 Hooks

定义：将相关逻辑封装为函数（命名以 use 开头，如 useCounter、useFetch）。
优势：替代 Vue2 的 mixin，解决命名冲突、来源不清晰问题。

3. 与 Options API 的对比

特点	Options API	Composition API
逻辑组织	按选项（data、methods）拆分	按功能模块拆分
逻辑复用	mixin（易冲突）	自定义 Hooks（清晰灵活）
TypeScript	类型推导困难	完美支持类型推导
适用场景	小型项目	中大型项目、复杂逻辑复用

四、组件系统（增强与新特性）

1. 组件定义

defineComponent：提供 TypeScript 类型支持的组件定义方式。
<script setup> 中直接导入组件即可使用，无需注册。

2. Props & Emits 增强

Props ：支持 TypeScript 类型定义（如 defineProps<{ msg: string }>()）。
Emits ：通过 defineEmits 定义事件，支持类型校验（如 defineEmits<{ (e: 'update', value: number): void }>()）。

3. 插槽（Slot）新语法

统一使用 v-slot（替代 slot 和 slot-scope），支持缩写 #。
作用域插槽：通过 <template #default="{ data }"> 接收子组件数据。

4. 内置新组件

组件	作用	典型场景
`Teleport`	将组件内容渲染到指定 DOM 节点	弹窗、抽屉（避免父组件样式干扰）
`Suspense`	处理异步组件加载状态	配合 `async setup` 显示加载中/错误状态

5. 动态与异步组件

动态组件：<component :is="currentComponent">，结合 keep-alive 缓存状态。
异步组件：defineAsyncComponent(() => import('./MyComponent.vue'))，支持加载失败/超时处理。

五、生命周期钩子

1. Vue3 生命周期（与 Vue2 对应）

Vue2 生命周期	Vue3 生命周期（Composition API）	执行时机
beforeCreate	setup（替代）	组件实例创建前
created	setup（替代）	组件实例创建后
beforeMount	onBeforeMount	DOM 挂载前
mounted	onMounted	DOM 挂载后
beforeUpdate	onBeforeUpdate	数据更新、DOM 重新渲染前
updated	onUpdated	数据更新、DOM 重新渲染后
beforeDestroy	onBeforeUnmount	组件卸载前
destroyed	onUnmounted	组件卸载后

2. 新增调试钩子

onRenderTracked：追踪响应式依赖被访问时触发。
onRenderTriggered：追踪响应式依赖变化触发重新渲染时触发。

六、模板语法与指令

1. 核心变化

v-model 升级 ：
- 支持多个 v-model（如 <Child v-model:title="title" v-model:content="content" />）。
- 自定义修饰符（如 v-model.capitalize="text"）。
v-if 与 v-for 优先级 ：Vue3 中 v-if 优先级高于 v-for（Vue2 相反）。
多根节点支持：模板可直接写多个根元素（无需外层包裹 div）。

2. 常用指令

指令	作用	示例
`v-bind`	动态绑定属性（缩写 `:`）	`<img :src="imgUrl" />`
`v-on`	绑定事件（缩写 `@`）	`<button @click="handleClick" />`
`v-show`	切换 CSS `display` 控制显示	`<div v-show="isVisible" />`
`v-for`	列表渲染	`<li v-for="item in list" :key="item.id" />`

七、路由管理（Vue Router 4）

1. 核心变化

创建路由实例：createRouter（替代 new Router）。
历史模式：createWebHistory（HTML5 模式）、createWebHashHistory（Hash 模式）。

2. Composition API 中使用路由

useRouter：获取路由实例（用于编程式导航，如 router.push('/home')）。
useRoute：获取当前路由信息（如 route.query、route.params）。

3. 路由守卫

全局守卫：router.beforeEach、router.afterEach。
组件内守卫：onBeforeRouteEnter、onBeforeRouteUpdate、onBeforeRouteLeave（在 setup 中使用）。

八、状态管理（Pinia）

1. 核心概念（替代 Vuex）

Store ：状态管理的核心单元，通过 defineStore 定义。
State：响应式状态（直接修改，无需 mutations）。
Getters：计算属性（缓存派生状态）。
Actions：同步/异步方法（替代 mutations + actions）。

2. 基本使用

javascript 复制代码

// 定义 Store
const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: { doubleCount: (state) => state.count * 2 },
  actions: { increment() { this.count++ } }
})

// 组件中使用
const store = useCounterStore()
store.increment()

3. 优势

更简洁的 API（无 mutations、modules 嵌套）。
完美支持 TypeScript。
与 Vue DevTools 深度集成。

九、性能优化

1. 框架层面优化

虚拟 DOM 重写 ：
- 静态提升（将不变的节点提升到渲染函数外）。
- PatchFlags（标记动态节点，减少对比范围）。
Tree Shaking ：按需引入模块（如仅使用 ref 时不打包 reactive）。
响应式优化：Proxy 比 Object.defineProperty 性能提升 1.2~2 倍。

2. 开发层面优化技巧

使用 v-once：渲染一次后不再更新（适用于静态内容）。
使用 v-memo：缓存组件/元素的渲染结果（条件性更新）。
异步组件与路由懒加载：defineAsyncComponent、() => import('./Component.vue')。
避免不必要的响应式：使用 shallowRef/shallowReactive 处理大型数据。
合理使用 keep-alive：缓存组件状态，避免重复渲染。

十、TypeScript 支持

1. 核心类型定义

Props 类型 ：defineProps<{ msg: string; count?: number }>()。
Emits 类型 ：defineEmits<{ (e: 'update', value: number): void }>()。
Ref 类型 ：const count = ref<number>(0)。
Reactive 类型 ：const user = reactive<{ name: string; age: number }>({ name: 'Tom', age: 18 })。

2. `<script setup>` 中的 TS 最佳实践

使用 defineProps/defineEmits 的泛型语法。
为 ref/reactive 显式指定类型（或让 TS 自动推导）。
使用 Interface 定义复杂数据结构。

十一、生态与工具

1. 构建工具：Vite

与 Vue3 深度集成，提供极快的开发体验（冷启动、热更新）。
原生支持 ES Modules，无需打包即可运行开发环境。

2. 常用库

VueUse ：提供大量实用的 Composition API Hooks（如 useLocalStorage、useMouse）。
Element Plus：Vue3 版本的 Element UI 组件库。
Ant Design Vue：企业级 UI 组件库（Vue3 版）。

3. 调试工具

Vue DevTools：支持 Vue3 的组件树、状态追踪、性能分析。

十二、最佳实践

优先使用 Composition API + <script setup>：提升代码可维护性和 TypeScript 支持。
逻辑复用用自定义 Hooks：替代 mixin，避免命名冲突。
状态管理用 Pinia：替代 Vuex，简化状态管理流程。
性能优化从细节入手 ：合理使用 v-memo、异步组件、Tree Shaking。
TypeScript 类型安全：为 Props、Emits、响应式数据添加类型定义。

【Vue】Vue3 核心知识体系的全方位总结

文章目录

Vue3 核心知识体系全景图

一、核心设计理念与升级亮点

1. 设计目标

2. 与 Vue2 的核心区别

二、响应式系统（核心基石）

1. 响应式原理：Proxy vs Object.defineProperty

2. 核心响应式 API

3. 响应式进阶

三、Composition API（逻辑复用的革命）

1. 核心入口：setup 函数

2. 逻辑组织与复用：自定义 Hooks

3. 与 Options API 的对比

四、组件系统（增强与新特性）

1. 组件定义

2. Props & Emits 增强

3. 插槽（Slot）新语法

4. 内置新组件

5. 动态与异步组件

五、生命周期钩子

1. Vue3 生命周期（与 Vue2 对应）

2. 新增调试钩子

六、模板语法与指令

1. 核心变化

2. 常用指令

七、路由管理（Vue Router 4）

1. 核心变化

2. Composition API 中使用路由

3. 路由守卫

八、状态管理（Pinia）

1. 核心概念（替代 Vuex）

2. 基本使用

3. 优势

九、性能优化

1. 框架层面优化

2. 开发层面优化技巧

十、TypeScript 支持

1. 核心类型定义

2. <script setup> 中的 TS 最佳实践

十一、生态与工具

1. 构建工具：Vite

2. 常用库

3. 调试工具

十二、最佳实践

1. 核心入口：`setup` 函数

2. `<script setup>` 中的 TS 最佳实践