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

Vue3 核心知识体系全景图

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

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

1. 设计目标

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

2. 与 Vue2 的核心区别

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

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

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

2. 核心响应式 API

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 的对比

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

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. 内置新组件

5. 动态与异步组件

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

五、生命周期钩子

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

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. 常用指令

七、路由管理（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. 基本使用

// 定义 StoreconstuseCounterStore=defineStore('counter',{state:()=>({count:0}),getters:{doubleCount:(state)=>state.count*2},actions:{increment(){this.count++}}})// 组件中使用conststore=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 的组件树、状态追踪、性能分析。

十二、最佳实践

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