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

文章目录Vue3 核心知识体系全景图一、核心设计理念与升级亮点1. 设计目标2. 与 Vue2 的核心区别二、响应式系统核心基石1. 响应式原理Proxy vs Object.defineProperty2. 核心响应式 API3. 响应式进阶三、Composition API逻辑复用的革命1. 核心入口setup 函数2. 逻辑组织与复用自定义 Hooks3. 与 Options API 的对比四、组件系统增强与新特性1. 组件定义2. Props Emits 增强3. 插槽Slot新语法4. 内置新组件5. 动态与异步组件五、生命周期钩子1. Vue3 生命周期与 Vue2 对应2. 新增调试钩子六、模板语法与指令1. 核心变化2. 常用指令七、路由管理Vue Router 41. 核心变化2. Composition API 中使用路由3. 路由守卫八、状态管理Pinia1. 核心概念替代 Vuex2. 基本使用3. 优势九、性能优化1. 框架层面优化2. 开发层面优化技巧十、TypeScript 支持1. 核心类型定义2. script setup 中的 TS 最佳实践十一、生态与工具1. 构建工具Vite2. 常用库3. 调试工具十二、最佳实践Vue3 核心知识体系全景图Vue3 以性能提升、Composition API、更好的 TypeScript 支持为核心构建了更灵活、可维护的前端框架体系。以下是全方位结构化总结一、核心设计理念与升级亮点1. 设计目标性能优先通过 Proxy 响应式、虚拟 DOM 优化实现更快的渲染速度。可维护性Composition API 解决大型项目逻辑复用难题。渐进式框架保留 Vue2 灵活性同时支持更规范的工程化开发。2. 与 Vue2 的核心区别维度Vue2Vue3响应式原理Object.definePropertyProxy性能更好、支持数组/对象深层监听API 风格Options API选项式Composition API组合式推荐组件根节点仅支持单根节点支持多根节点FragmentTypeScript支持有限原生深度支持新特性无Teleport、Suspense、Pinia二、响应式系统核心基石1. 响应式原理Proxy vs Object.definePropertyVue2通过Object.defineProperty劫持对象属性需递归遍历、无法监听数组索引变化。Vue3使用Proxy代理整个对象支持监听数组索引和长度变化监听对象属性的新增/删除懒监听仅在访问时递归代理子对象。2. 核心响应式 APIAPI作用适用场景ref定义基本类型/对象的响应式数据基本类型数字、字符串、需.value访问reactive定义对象/数组的响应式数据复杂对象无需.valuecomputed计算属性缓存结果依赖其他响应式数据的派生值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 APIComposition 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 :iscurrentComponent结合keep-alive缓存状态。异步组件defineAsyncComponent(() import(./MyComponent.vue))支持加载失败/超时处理。五、生命周期钩子1. Vue3 生命周期与 Vue2 对应Vue2 生命周期Vue3 生命周期Composition API执行时机beforeCreatesetup替代组件实例创建前createdsetup替代组件实例创建后beforeMountonBeforeMountDOM 挂载前mountedonMountedDOM 挂载后beforeUpdateonBeforeUpdate数据更新、DOM 重新渲染前updatedonUpdated数据更新、DOM 重新渲染后beforeDestroyonBeforeUnmount组件卸载前destroyedonUnmounted组件卸载后2. 新增调试钩子onRenderTracked追踪响应式依赖被访问时触发。onRenderTriggered追踪响应式依赖变化触发重新渲染时触发。六、模板语法与指令1. 核心变化v-model升级支持多个v-model如Child v-model:titletitle v-model:contentcontent /。自定义修饰符如v-model.capitalizetext。v-if与v-for优先级Vue3 中v-if优先级高于v-forVue2 相反。多根节点支持模板可直接写多个根元素无需外层包裹 div。2. 常用指令指令作用示例v-bind动态绑定属性缩写:img :srcimgUrl /v-on绑定事件缩写button clickhandleClick /v-show切换 CSSdisplay控制显示div v-showisVisible /v-for列表渲染li v-foritem in list :keyitem.id /七、路由管理Vue Router 41. 核心变化创建路由实例createRouter替代new Router。历史模式createWebHistoryHTML5 模式、createWebHashHistoryHash 模式。2. Composition API 中使用路由useRouter获取路由实例用于编程式导航如router.push(/home)。useRoute获取当前路由信息如route.query、route.params。3. 路由守卫全局守卫router.beforeEach、router.afterEach。组件内守卫onBeforeRouteEnter、onBeforeRouteUpdate、onBeforeRouteLeave在setup中使用。八、状态管理Pinia1. 核心概念替代 VuexStore状态管理的核心单元通过defineStore定义。State响应式状态直接修改无需 mutations。Getters计算属性缓存派生状态。Actions同步/异步方法替代 mutations actions。2. 基本使用// 定义 StoreconstuseCounterStoredefineStore(counter,{state:()({count:0}),getters:{doubleCount:(state)state.count*2},actions:{increment(){this.count}}})// 组件中使用conststoreuseCounterStore()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 refnumber(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 PlusVue3 版本的 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、响应式数据添加类型定义。