vue3复习

<think>嗯，用户之前问了JavaScript的复习重点，现在又问Vue3的复习。可能他正在准备前端相关的面试或者考试，需要系统地复习这些技术点。之前我给的JavaScript复习结构比较清晰，用户可能希望Vue3部分也能有类似的层次结构，方便他逐步学习和查漏补缺。 首先，我要确定用户对Vue3的了解程度。可能是已经学过Vue2，现在需要升级到Vue3，或者直接学习Vue3。考虑到Vue3和Vue2的区别挺大的，我需要重点对比两者的不同，比如Composition API和Options API的区别，响应式系统的变化等。 接下来，用户可能需要核心概念的复习，比如响应式原理、组件化、生命周期这些。Vue3中新增了setup语法、Teleport、Suspense等特性，这些都是必须涵盖的点。另外，组合式API的使用频率高，面试中常被问到，需要详细说明。 然后，用户可能关心Vue3的新特性和优化，比如性能提升、Tree-shaking支持，以及TypeScript的集成。这些都是Vue3的重要卖点，应该在复习重点中强调。 还要考虑工程实践，比如Vite的使用，Vue Router和Pinia的状态管理。这些工具和库在实际项目中常用，复习时不能忽略。 高频考点方面，用户可能想知道面试常问的问题，比如响应式原理、Composition API的优点、虚拟DOM优化等。需要整理这些点，并给出示例代码，方便用户理解。 最后，复习建议部分应该包括学习资源和实践建议，比如推荐官方文档、实战项目，以及注意TypeScript的结合使用。用户可能希望有明确的学习路径，避免浪费时间在不重要的内容上。 需要注意的是，用户可能希望回答结构清晰，分点列出，便于记忆和复习。同时，代码示例要准确，符合Vue3的语法规范，特别是组合式API的写法。另外，对比Vue2和Vue3的区别能帮助用户更快过渡，应该包含这部分内容。 总结下来，回答的结构应该包括核心概念、新特性、工程实践、高频考点和复习建议，每个部分再细分具体内容，并附上代码示例和注意事项。这样用户能系统地掌握Vue3的重点，应对面试或实际开发需求。</think>以下是针对Vue 3的**核心复习要点梳理**，按技术分层与高频考点分类，帮助系统性掌握关键知识： --- ### 一、核心概念与基础语法 #### 1. **响应式系统** - **核心原理** - 基于Proxy实现响应式（Vue 2使用`Object.defineProperty`） - `ref`与`reactive`的区别： ```javascript const count = ref(0); // 包装基本类型（通过.value访问） const state = reactive({ // 直接包装对象 name: 'Vue3' }); ``` - **响应式工具** `toRefs`（解构响应式对象）、`computed`、`watch`、`watchEffect` #### 2. **组合式API（Composition API）** - **`setup`函数** ```javascript setup(props, context) { // 在此定义响应式数据、方法 return { ... } // 暴露给模板 } ``` - **逻辑复用** 使用`useXxx`函数封装可复用逻辑（替代Vue 2的Mixins） 示例： ```javascript // useCounter.js export function useCounter() { const count = ref(0); const increment = () => count.value++; return { count, increment }; } ``` #### 3. **生命周期钩子** - Vue 3生命周期前缀改为`on`： ```javascript import { onMounted, onUpdated } from 'vue'; setup() { onMounted(() => { console.log('组件挂载') }); } ``` - 与Vue 2对应关系： `created` → `setup`中直接执行代码 `mounted` → `onMounted` --- ### 二、Vue 3新特性与优化 #### 1. **性能提升** - 虚拟DOM优化：静态节点提升（Hoist Static）、补丁标记（Patch Flag） - Tree-shaking支持：按需引入API减少打包体积 #### 2. **新组件与API** - **`<Teleport>`**：将组件渲染到DOM任意位置 ```html <teleport to="body"> <Modal /> <!-- 将弹窗渲染到body下 --> </teleport> ``` - **`<Suspense>`**：异步组件加载状态管理 ```html <Suspense> <template #default><AsyncComponent /></template> <template #fallback>Loading...</template> </Suspense> ``` - **`v-model`升级**：支持多个双向绑定 ```html <ChildComponent v-model:title="pageTitle" v-model:content="pageContent" /> ``` #### 3. **TypeScript支持** - 源码使用TypeScript重写 - 类型推断优化：组件Props、Emit类型声明更直观 ```typescript interface Props { msg: string; } const props = defineProps<Props>(); ``` --- ### 三、工程实践与高频考点 #### 1. **Vite项目配置** - 开发服务器基于ESM原生支持，热更新极速 - 配置文件`vite.config.js`常用配置： ```javascript export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': path.resolve(__dirname, 'src') } } }); ``` #### 2. **状态管理（Pinia）** - 替代Vuex的轻量级方案 - 核心概念：`defineStore`定义Store ```javascript export const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }), actions: { increment() { this.count++ } } }); ``` #### 3. **Vue Router 4** - 路由定义变化： ```javascript import { createRouter, createWebHistory } from 'vue-router'; const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', component: Home } ] }); ``` - 组合式API用法： ```javascript import { useRoute, useRouter } from 'vue-router'; const route = useRoute(); // 当前路由信息 const router = useRouter(); // 路由跳转方法 ``` --- ### 四、高频面试问题与技巧 1. **Vue 3 vs Vue 2核心区别** - 响应式原理（Proxy vs Object.defineProperty） - Composition API vs Options API - 性能优化策略（如Fragment、静态提升） 2. **响应式原理深入** - 如何手动实现简易Proxy响应式系统？ - `ref`为什么需要.value访问？ 3. **虚拟DOM Diff算法优化** - 静态节点标记、动态属性标记 --- ### 五、复习建议 1. **优先级排序** Composition API > 响应式原理 > 新特性（Teleport/Suspense） > 性能优化 > 生态工具（Pinia/Vue Router） 2. **实战验证** - 使用Vite搭建项目，体验组合式API - 手写简易响应式系统（Proxy实现） - 对比Vue 2与Vue 3组件写法差异 3. **学习资源** - 官方文档：[Vue 3官方文档](https://vuejs.org/) - 源码分析：GitHub Vue 3源码核心模块（如reactivity） - 实战项目：TodoList、电商后台管理系统 --- **注意**：复习时重点关注组合式API的灵活性与TypeScript深度集成，同时理解底层原理（如Proxy响应式）是面试加分项。