【前端面试题】Vu3常见的面试题

1.Vue3与 Vue2的核心区别有哪些？

1. ‌ 响应式系统 ‌：

   • ‌ Vue2：通过Object.defineProperty 实现响应式。这种方式在处理对象属性的添加和删除时存在局限性，且无法直接监控数组的变化 ‌;
   • ‌Vue3：采用Proxy 实现响应式，可以直接监控数组的变化，且性能更高。Proxy 提供了更多的功能，如拦截、应用、拥有密钥等，这些在 Object.defineProperty 中无法实现 ‌;

2. ‌ 性能优化 ‌：

   • ‌Vue3在性能上有显著提升，包括打包大小减少41%，初次渲染速度提升55%，更新渲染速度提升133%，内存占用减少54%‌;
   • ‌ 虚拟DOM优化 ‌：Vue3重构了虚拟DOM的实现，优化了模板编译时间，提取和重用了内联事件，减少了不必要的重绘和重新计算 ‌;

3. ‌ 组合式 API‌：

   • ‌Vue2采用选项式 API（Options API），逻辑分散在 data、props、computed、watch 等选项中，导致代码可读性差 ‌;
   • ‌Vue3引入了组合式 API（Composition API），将相关逻辑放在一个函数中，增强了代码的可读性和内聚性。通过 setup 函数、ref、reactive、watch 等函数组织代码，提高了逻辑复用性和代码维护性 ‌;

4. ‌ 生命周期钩子 ‌：

   • ‌Vue2有 10 个生命周期钩子，如 beforeCreate、created、beforeMount、mounted 等 ‌;
   • ‌Vue3简化了生命周期钩子，只有 7 个，主要包括 setup、onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted 等 ‌;

5. ‌ 对 TypeScript 的支持 ‌：

   • ‌Vue3原生支持TypeScript，提供了更好的类型推断和类型安全，减少了手动类型注释的需求，提升了代码质量和开发效率 ‌;

2.Vue3.0所采用的Composition Api 与Vue2.x使用的Options Api有什么不同？

Options API：逻辑分散在 data/methods/computed 等选项中，复用需 Mixin；
Composition API：通过 setup 函数组合逻辑，复用通过自定义 Hook，代码更清晰；

区别：

1. 代码组织方式：

   • Options API：按功能模块拆分代码（data、methods、computed等选项），逻辑分散在不同选项中；
   • Composition API：通过setup函数以函数式风格组织代码，逻辑按功能抽取为独立函数（如useCounter）；

2. 逻辑复用机制 ：

   • Options API： 通过mixins复用逻辑，但存在命名冲突、变量来源不清晰等问题；
   • Composition API：通过自定义组合函数（如useFetch）实现逻辑复用，变量作用域明确，避免命名污染；

3. 类型支持：

   • Options API：需通过@types/vue声明类型，类型推导较弱，复杂场景易出错；
   • Composition API：原生支持TypeScript，函数参数和返回值可明确标注类型，类型推导更精准；

4. 响应式系统的使用 ：

   • Options API：通过this访问响应式数据，依赖Object.defineProperty实现；
   • Composition API：通过ref、reactive等函数显式创建响应式变量，直接操作值（如count.value++）。更细粒度的依赖追踪（基于Proxy），支持动态新增/删除属性；

5. 生命周期钩子：

   • Options API：直接使用created、mounted等生命周期选项；
   • Composition API：在setup中通过onMounted、onUpdated等函数注册生命周期钩子，逻辑更集中；

6. 适用场景 ：

   • Options API：简单组件或对TypeScript需求不高的项目；
   • Composition API：复杂组件、大型项目或需要逻辑高度复用的场景；

3.Vue2 和 Vue3 双向绑定的原理和区别？

Vue2的双向绑定原理：Vue 2 的双向绑定是基于 Object.defineProperty 和发布-订阅模式实现的。以下是其实现的关键步骤：

1. 数据劫持：

   • Vue2 使用Object.defineProperty对数据对象的每个属性进行劫持，通过定义getter和setter 方法来拦截数据的读取和修改操作；
   • 当数据被访问时，触发getter，进行依赖收集；当数据被修改时，触发setter，通知视图更新；

2. 依赖收集：

   • 在组件初始化时，Vue会解析模板中的指令（如 v-model），并为每个依赖于响应式数据的地方创建一个Watcher 实例；
   • Watcher 会将自身添加到对应数据属性的Dep中，Dep用于管理所有依赖该属性的Watcher；

3. 视图更新：

   • 当数据通过setter被修改时，Dep会通知所有相关的 Watcher，Watcher则会调用更新函数来重新渲染视图；

Vue3的双向绑定原理：

1. 数据劫持：

   • Vue3使用Proxy来拦截对象的操作，包括属性的访问、修改、删除等；
   • Proxy提供了更全面的拦截能力，能够直接处理对象的动态属性添加和删除；

2. 依赖收集与更新：

   • 在初始化时，Vue3通过Proxy的getter拦截器进行依赖收集，将Watcher添加到对应的依赖管理器中；
   • 当数据通过setter被修改时，Proxy会通知所有相关的Watcher，触发视图更新；

区别：

1. 底层实现：

   • Vue 2：基于Object.defineProperty，只能劫持对象的现有属性，无法自动检测新属性的添加或删除；
   • Vue 3：基于Proxy，能够拦截对象的所有操作，包括动态属性的添加和删除；

2. 性能优化：

   • Vue 2：由于使用发布-订阅模式，当数据变化时，所有订阅者都需要被通知，可能导致性能问题；
   • Vue 3：通过Proxy，能够更精确地检测数据变化，减少不必要的更新，提高性能；

3. 灵活性：

   • Vue 2：在处理复杂数据结构时，如动态添加属性或修改数组长度，需要使用Vue.set 或其他方法；
   • Vue 3：直接支持动态属性和数组操作，无需额外方法；

4. 对 TypeScript 的支持：

   • Vue 2：类型系统相对较弱；
   • Vue 3：提供了更丰富的类型定义和更好的集成，更适合TypeScript开发；

4.Vue3的emits选项定义组件事件与Vue2的emit事件处理有何不同？

1. 声明方式：强制显式 vs 隐式触发

   • Vue3：必须通过emits选项声明事件（选项式 API）或 defineEmits（组合式 API），否则触发未声明事件时会抛出警告；
   • Vue2：无需声明，直接通过this.$emit触发事件，未监听的事件会静默忽略；

2. 类型安全：原生支持 vs 依赖第三方

   • Vue3：支持TypeScript类型标注，精确约束事件参数类型；
   • Vue2：无原生类型支持，需依赖vue-class-component等库实现类型约束；

3. 错误处理：警告提示 vs 静默失败

   • Vue3：触发未声明的事件时，若父组件未监听，则抛出警告（可通过 inheritAttrs: false禁用）；
   • Vue2：触发未声明事件时，不会报错，直接忽略；

4. 继承行为：事件与属性分离

   • Vue3：事件不会被继承到子组件的根元素，避免与HTML原生事件冲突；
   • Vue2：事件会被自动继承到子组件根元素，需通过inheritAttrs: false 关闭；

5. 参数验证：内置支持 vs 手动实现

   • Vue3 ：emits选项可直接校验参数；
   • Vue2：需在事件触发时手动添加参数校验逻辑；

5.简述Vue 3的插槽和Vue 2有何不同 ？

1. 指令统一化：

   • Vue 2：使用 slot 属性定义具名插槽，slot-scope 接收作用域数据；
   • Vue 3：统一使用 v-slot 指令，语法更简洁；

2. 作用域插槽简化：

   • Vue 3：作用域数据直接通过 v-slot 的参数接收，支持解构；
   • Vue 2：需通过 slot-scope 显式声明，且作用域链较长时易混淆；

3. 模板限制：

   • Vue 3：v-slot 必须写在 <template> 标签上（除默认插槽的独占缩写）；
   • Vue 2：slot 和 slot-scope 可用于任意 HTML 标签；

4. 动态插槽名：

   • Vue3：支持动态指定插槽名；
   • Vue2：需通过条件渲染间接实现；

5. 默认插槽缩写：

   • Vue3：默认插槽可省略 :default；
   • Vue2：需显式声明 slot="default"；

6. 组合式API集成：

   • Vue3：结合 <script setup>，插槽使用更简洁，类型推导更友好；

7. Fragments支持：

   • Vue3：子组件可返回多个根节点（<>...</>），插槽内容可分布在多个节点中；
   • Vue2：子组件必须有单个根节点，限制了插槽布局灵活性；

6.Vue3的优势?

1. 性能优化‌：
   • 编译时间减少：Vue3的模板编译器进行了优化，编译速度比Vue2快了30%；
   • 运行时性能提升：重写的虚拟DOM和响应性系统使得运行时性能更高效，减少了内存占用和CPU使用率；
   • 减少包体积：通过Tree-shaking优化，Vue3的包体积比Vue2小了50%；
2. 组合式API‌：
   • 模块化代码：通过组合式API，可以将逻辑提取到单独的函数中，从而实现更好的代码复用；
   • 更好的类型推断：组合式API对TypeScript的支持更友好，能提供更好的类型推断和代码提示；
   • 清晰的逻辑分离：相比于Vue2的Options API，组合式API使得不同功能块之间的逻辑更加清晰和分离；
3. 树形摇树优化：
   • 更小的打包体积：通过Tree-shaking，最终打包体积更小，加载速度更快；
   • 高效的代码分割：支持按需加载，减少初始加载时间，提高应用的性能；
   • 优化的模块引入：Vue3的模块化设计使得Tree-shaking更加高效，进一步减少了不必要的代码；
4. TypeScript支持‌：
   • 内置支持：Vue3核心完全用TypeScript重写，内置支持TypeScript；
   • 类型推断：组合式API和Vue3的模块化设计使得类型推断更加准确；
   • 开发体验：对TypeScript的友好支持提升了开发体验，减少了代码错误，提高了代码质量；
5. 改进的响应性系统‌：
   • Proxy机制：使用Proxy替代Vue2中的Object.defineProperty，提升了性能和灵活性；
   • 更细粒度的反应：响应性系统的改进使得组件更新更高效，减少了不必要的重新渲染；
   • 更好的调试工具：改进的响应性系统提供了更强大的调试工具，帮助开发者更容易定位和解决问题；
6. 增强的可维护性‌：
   • 模块化设计：Vue3的核心库和生态系统模块化设计，使得升级和维护更加简单；
   • 更清晰的代码结构：组合式API和单文件组件（SFC）使得代码结构更加清晰，便于维护；
   • 改进的开发工具：Vue3的开发者工具提供了更强大的功能，帮助开发者更好地管理和维护项目；

7.Vue3 的打包体积为什么更小？

1. Tree-shaking优化‌：Tree-shaking是一种通过静态分析模块依赖关系，去除未使用的代码的技术。Vue3通过模块化设计，允许构建工具如Webpack和Rollup更好地进行Tree-shaking，从而减少打包后的代码体积‌；
2. Composition API‌：Vue3引入了Composition API，这种新的组件定义方式允许开发者以更灵活和简洁的方式组织代码。通过按需加载模块和复用代码片段，减少了不必要的代码加载，进一步优化了代码结构‌；
3. 现代构建工具的使用‌：Vu 3充分利用了现代构建工具和技术，如Webpack、Rollup和Vite。这些工具支持高级优化技术，如代码拆分、压缩和混淆，自动压缩和混淆代码，减少文件大小‌；
4. 更小的核心库‌：Vue3的核心库进行了精简和优化，移除了一些不常用的功能，并将其作为独立的插件提供。这种设计使得Vue3的核心库在功能强大的同时也保持了较小的体积‌；
5. 改进的响应式系统‌：Vue3采用了基于Proxy的响应式系统，相比Vue2的defineProperties，Proxy仅对所使用的属性进行监听，减少了无谓的开销，提高了打包效率‌；
6. 优化的组件渲染‌：Vue3在渲染过程中进行了大量优化，包括对模板中的静态节点进行编译优化、diff算法的优化等，进一步减少了最终打包的大小‌；
7. 代码压缩和混淆‌：打包工具会对代码进行压缩和混淆处理，删除空白字符、注释和缩短变量名，同时通过混淆代码使代码难以阅读，但不影响功能，从而减少文件大小‌；

8.Vue3的设计目标是什么？

1. 更小、更轻量：Vue3通过移除一些不常用的API和引入tree-shaking 技术，实现了更小的打包体积。这意味着开发者可以只包含应用中实际使用的代码，从而减少了不必要的代码加载，提高了应用的加载速度和性能；
2. 更快、更高效：Vue3在性能上进行了多项优化。例如，优化了diff算法，使其在处理虚拟DOM更新时更加高效；引入了静态提升技术，将静态节点在编译时提升到更高的作用域，减少了运行时的计算；同时，事件监听也进行了缓存优化，减少了不必要的监听器注册和注销。此外，Vue3还对服务器端渲染（SSR）进行了改进，提升了渲染速度和整体性能；
3. 更友好、更易用：Vue3引入了 Composition API，这一新特性提供了更灵活的逻辑复用和组织方式。开发者可以更加自由地组合和重用代码逻辑，而不再受限于传统的选项式 API。此外，Vue3提供了对TypeScript 的原生支持，使得类型检查和代码补全等开发体验得到了显著提升；
4. 增强可维护性：Vue3通过重构和采用现代 JavaScript 特性（如 Proxy 和 Reflect），提高了框架内部的可维护性和可扩展性。这使得Vue框架本身更加健壮、易于理解和维护；
5. 促进生态系统的成长：Vue3设计了新的 API 和工具，使得库和工具的作者更容易为 Vue3提供或更新他们的产品。这有助于构建一个更加繁荣、活跃的 Vue 生态系统，为开发者提供更多选择和更好的支持；

9.Vue3的项目结构有哪些调整？

1. Composition API：Vue3引入了Composition API，这是对Vue2的Options API的一个补充和改进。Composition API允许开发者以更灵活的方式组织和复用代码，特别是在处理大型组件时；
2. 单文件组件（SFC）的改进：Vue3对单文件组件（SFC）提供了更好的支持，特别是通过<script setup>标签，它提供了一种编写单文件组件的新方式；
3. 项目目录结构的优化：Vue3项目通常建议在项目目录结构上进行一些优化，比如将组件、页面、服务等逻辑分离到不同的文件夹中；
4. 全局状态管理工具：Vue3通常与状态管理库（如Vuex）结合使用，但Vue3本身也提供了全局状态管理的内置支持（如Provide/Inject）；

10.Vue3 模板语法有哪些改进？

1. 指令优先级调整：
   • 在Vue2中，v-for指令的优先级高于v-if指令。但在Vue3中，这一优先级得到了调整，v-if指令的优先级现在高于v-for指令。这一改变有助于开发者更好地控制渲染逻辑，避免不必要的性能开销；
2. 组合式API（Composition API）的引入：
   • Vue3引入了Composition API，这是一种基于函数的API风格，允许开发者以更灵活的方式组织和复用代码。与Vue2中的Options API相比，Composition API提供了更好的逻辑分离和复用性，特别是在处理复杂应用时，能够显著提升代码的可维护性；
3. 静态节点优化：
   • 在Vue3中，编译器会对静态节点进行标记，在更新时可以直接跳过这些静态节点。这一优化减少了DOM操作，进一步提高了渲染性能；
4. 异步删除操作优化：
   • 对于动态删除操作，Vue3采用了异步队列的方式进行，能够将多个删除操作合并为一个，从而减少DOM操作，提升性能；
5. Fragments优化：
   • 在Vue2中，Fragments（片段）会引入额外的虚拟DOM层级，导致Diff算法需要进行更多的比较操作。而在Vue3中，对Fragments进行了优化，可以直接将其内部的内容合并到父级中，减少了虚拟DOM层级，提高了Diff算法的效率；
6. 性能提升的其他方面：
   • Vue3还对底层的响应式系统进行了重写，使用了Proxy代理对象而非Vue2中的Object.defineProperty，这带来了更好的性能和更低的内存消耗；
   • Vue3引入了Patch flag的概念，用于标记组件在更新过程中的一些特殊情况，如组件的props发生变化或只需要强制更新等。这有助于在Diff算法中更快速地定位需要更新的组件，减少了比较的工作量；
7. 模板语法的其他改进：
   • Vue3保留了Vue2中广泛使用的模板语法，如v-text、{{ }}插值表达式、v-html等，并进行了进一步的优化和完善；
   • Vue3还支持v-model指令的双向数据绑定，以及事件绑定指令和列表渲染指令等，为开发者提供了丰富的模板语法选择；

11.Vue3中的组件生命周期钩子有哪些变化？

1. 移除的钩子：
   • beforeDestroy 和 destroyed 被替换为 beforeUnmount 和 unmounted；
   • activated 和 deactivated（用于 ）现在分别更名为 onActivate 和 onDeactivate；
2. 新增的钩子：
   • onBeforeMount：在组件的挂载开始之前调用；
   • onMounted：在组件的挂载完成后调用；
   • onBeforeUpdate：在组件的更新之前调用；
   • onUpdated：在组件的更新完成后调用；
   • onBeforeUnmount：在组件卸载之前调用；
   • onUnmounted：在组件卸载完成后调用；
   • onErrorCaptured：当捕获一个来自子孙组件的错误时调用；
   • onRenderTracked 和 onRenderTriggered：这两个钩子用于调试，它们可以帮助你跟踪组件渲染过程中依赖项的变化；
3. 使用方法的变化：
   • 在 Vue3 中，生命周期钩子不再是通过字符串形式在选项中定义的，而是作为 Composition API 的一部分使用；
4. Composition API 的集成：
   • Vue3 的 Composition API 允许你将组件的逻辑代码更加模块化和可重用，通过使用这些生命周期钩子，你可以更容易地组织和维护复杂的组件逻辑；

12.请解释Vue3中的响应式系统的工作原理？

Vue3 中的响应式系统通过 ES6 的 Proxy 对象和 Reactive API 实现高效的数据观察和更新机制;
工作原理：

1. Proxy 对象：Vue3 使用 Proxy 对象拦截对数据对象的操作，包括属性读取、赋值和删除。当一个组件被创建时，Vue 为其 data 对象创建一个响应式代理对象。这个代理对象可以监听到数据的变化，并在数据变化时更新视图；
2. Reactive API：通过调用 reactive 函数，可以将普通的 JavaScript 对象转换为响应式对象。当对象发生变化时，Vue 能够检测到并更新相应的视图。此外，Vue3 还提供了 readonly 和 ref 函数来创建只读和包装过的响应式对象；
3. 依赖收集与追踪：当某个响应式属性被访问时，Vue 会记录哪个组件或函数依赖了该属性。当属性值变化时，所有依赖该属性的函数会被通知重新执行。依赖收集通过 Effect 函数实现；
4. track 和 trigger：在 get 拦截器中调用 track 记录依赖，在 set 拦截器中调用 trigger 通知依赖更新；

13.Vue3中的虚拟DOM优化了哪些方面？

1. 静态提升：
   • 原理：Vue3 编译器会分析模板，识别出静态节点，也就是那些内容不会随数据变化而改变的节点。编译器会将这些静态节点提升到渲染函数外部，在首次渲染时创建它们，之后的渲染过程中直接复用这些节点，而不是每次都重新创建；
   • 效果：这样做大大减少了不必要的节点创建操作，降低了内存占用和 CPU 计算量，尤其在大型项目或者包含大量静态内容的页面中，性能提升效果显著；
2. 补丁标志：
   • 原理：为每个虚拟DOM 节点添加特定的补丁标志，这些标志用于标记节点的哪些部分是动态的。在进行 Diff 算法比较新旧虚拟DOM时，Vue3 可以根据这些标志，只对有动态变化的部分进行详细比较，而忽略静态部分；
   • 效果：极大地减少了Diff 过程中的计算量，提高了比较的速度，从而加快了虚拟DOM的更新效率；
3. 静态属性缓存：
   • 原理：对于静态属性，Vue3会将其缓存起来。在后续的渲染过程中，不会重新计算和比较这些静态属性，避免了重复工作；
   • 效果：减少了额外的性能开销，让渲染过程更加高效；
4. 基于 Proxy 的响应式系统优化：
   • 原理：Vue3使用Proxy对象来实现响应式系统，相较于Vue2 中的 Object.defineProperty()，Proxy可以劫持整个对象的属性访问和修改操作，能够更精准地感知数据的变化；
   • 效果：当数据发生变化时，虚拟DOM可以更高效地接收到通知并进行更新，避免了Vue2中一些不必要的渲染，提高了整体性能；
5. 片段支持：
   • 原理：在 Vue3 中，组件可以返回多个根节点，形成片段。而在 Vue2中，组件必须有一个单一的根节点，这有时会导致需要添加额外的包装元素；
   • 效果：减少了不必要的包装元素，使虚拟DOM结构更加简洁，降低了虚拟DOM的复杂度，同时也让模板代码更加符合语义化，提升了开发的灵活性和代码的可读性；

14.简述Composition API如何实现代码逻辑的复用（hook) ？

1. 定义hook：
   • 创建一个JavaScript文件或直接在组件文件中定义一个以“use”为前缀命名的函数（例如useForm、useFetchData等）；
   • 在hook函数内部，使用Vue的响应式API（如ref、reactive、computed等）来定义和管理状态；
   • 封装业务逻辑，如数据获取、表单处理、事件监听等，并返回需要暴露给组件的状态和方法；
2. 调用hook：
   • 在组件的setup函数中，调用之前定义的hook函数；
   • 将hook返回的状态和方法解构并赋值给组件的局部变量，以便在模板中使用；
3. 复用逻辑：
   • 在不同的组件中，通过调用相同的hook函数来复用封装好的逻辑；
   • 这使得多个组件可以共享相同的业务逻辑，而无需重复编写代码；

15.简述setup()函数在Vue3中起什么作用 ？

1. 定义响应式状态：在 setup() 函数中，可以使用 Vue 提供的响应式 API（如 ref 和 reactive）来定义响应式状态。ref 用于创建单个值的响应式引用，reactive 用于创建对象的响应式引用；
2. 使用计算属性：可以在 setup() 函数中定义计算属性，使用 computed 函数来实现；
3. 声明方法：可以在 setup() 函数中定义方法，作为普通的 JavaScript 函数来声明，并在返回对象中公开这些方法；
4. 使用生命周期钩子：在 setup() 函数中，可以使用 Vue 提供的生命周期钩子函数来处理组件生命周期事件；
5. 使用依赖注入和提供：在 setup() 函数中，可以使用 provide 和 inject API 来实现依赖注入；
6. 组合逻辑：通过 setup() 函数，可以将逻辑组织成可复用的函数，这些函数可以在多个组件中共享；

16.简述setup 方法和 setup 语法糖的区别 ？

1. 语法结构层面：

   • setup方法：它是Vue3组合式 API 标准的书写方式。在组件对象中要显式定义setup函数，函数接收props和context作为参数，并且要手动返回一个对象，对象里包含需要在模板中使用的数据和方法；
   • setup语法糖：是 Vue3.2引入的语法糖。使用 <script setup> 标签包裹代码，无需显式定义setup函数，在这个标签内定义的变量和函数可以直接在模板中使用，无需手动返回；

2. API 使用方面：

   • setup方法：使用 ref、reactive、defineProps 等API时，必须手动从vue中导入；
   • setup语法糖：部分常用的API会自动注入，无需手动导入，像 ref、computed 等。不过，如果要使用一些高级API或者自定义的组合式函数，还是需要手动导入；

3. 类型支持角度：

   • setup方法：在结合TypeScript使用时，需要额外做一些配置来实现类型检查和推导。例如，使用defineProps定义props时，要明确指定类型；
   • setup语法糖：对TypeScript有更好的原生支持，类型推导更加自然和简洁。在定义props 和emits时，可以直接使用类型注解；

4. 适用场景差异：

   • setup方法：适用于处理复杂的组件逻辑，当需要对组件的初始化过程进行细粒度控制，或者要和Vue2 的选项式API混合开发时，使用setup方法比较合适；
   • setup语法糖：适合大多数日常开发场景，尤其是简单组件的开发。它能减少样板代码，提高开发效率，让开发者更专注于业务逻辑；

17.如何理解reactive、ref 、toRef 和 toRefs？

reactive：

• 定义：reactive是Vue3中用于创建响应式对象或数组的方法；
• 作用：通过reactive创建的响应式对象或数组，其内部的所有属性都会成为响应式的。当这些属性发生变化时，依赖于它们的组件或计算属性会自动更新；
• 使用场景：reactive更适合用于复杂的数据结构，如包含多个属性的对象或数组；

ref：

• 定义：ref是Vue3中用于创建响应式引用的方法；
• 作用：ref可以将一个普通的值（如字符串、数字、布尔值、对象、数组等）变成响应式的。当这个值发生变化时，依赖于它的组件或计算属性会自动更新；
• 使用场景：ref更适合用于基本数据类型和需要单独响应的复杂数据类型（如对象或数组）；

toRef：

• 定义：toRef是Vue3中的一个工具函数，用于将响应式对象的一个属性转换为一个独立的ref对象；
• 作用：toRef可以保持原始属性与转换后的ref对象之间的响应式连接。修改ref对象的值会更新原始属性，反之亦然；
• 使用场景：当需要将响应式对象的某个属性单独提取出来，同时保持其响应性时，可以使用toRef；

toRefs：

• 定义：toRefs是Vue3中的另一个工具函数，用于将一个响应式对象转换为一个普通对象，其中每个属性都是一个ref对象；
• 作用：toRefs可以保持解构后的响应式对象的属性仍然具有响应性；
• 使用场景：当需要解构响应式对象，并且希望解构后的属性仍然是响应式的时，可以使用toRefs；

18.Vue3 中 computed 属性的缓存机制是如何实现的？

在Vue3中，computed属性的缓存机制是通过依赖追踪、脏值标志以及重新计算来实现的。当定义一个computed属性时，Vue会追踪其依赖的响应式数据。如果依赖的数据没有发生变化，再次访问computed属性时会直接返回缓存的值，避免不必要的计算。当依赖的数据发生变化时，会触发computed属性的重新计算，并更新缓存。这种机制通过依赖追踪和脏值管理，有效地提高了应用的性能;

19.简述Vue 3中的watch和watchEffect有何不同？

区别

1. 触发时机不同：
   • watch：是惰性执行的。也就是说，它不会在组件创建时立即执行回调函数，只有当所监听的数据源发生变化时，才会触发回调；
   • watchEffect：会立即执行一次回调函数，并且在回调函数执行过程中自动追踪所依赖的响应式数据。之后，只要这些依赖数据发生变化，就会再次执行回调函数；
2. 依赖指定方式不同：
   • watch：需要明确指定要监听的数据源。可以是单个响应式数据（如 ref 或 reactive 对象）、多个响应式数据，也可以是一个 getter 函数；
   • watchEffect：不需要手动指定依赖，它会自动追踪回调函数中使用的所有响应式数据；
3. 回调参数不同：
   • watch：回调函数可以接收新值和旧值作为参数，方便开发者对比数据的变化情况；
   • watchEffect：回调函数没有提供新值和旧值的参数，它更侧重于执行副作用操作，比如更新DOM、发送网络请求等；

使用场景

• watch：适用于需要根据特定数据变化执行操作的场景。由于它可以访问新旧值，因此适合进行更复杂的操作，如深度监听、监听多个数据源等;
• watchEffect：适用于简单的、与UI强相关的场景，或者不需要访问之前数据的场景。它更加简洁高效，因为自动收集依赖并立即执行，无需手动指定监听的数据;

20.Vue3 中如何使用 provide 和 inject 实现依赖注入？它们的作用是什么？

使用方法：

1. provide的使用：
   • provide函数用于在父组件或祖先组件中提供数据或方法;
   • 它通常在父组件的setup函数中使用，接受两个参数：key和value;
     • key：注入名，可以是一个字符串或是一个Symbol，用于后代组件查找期望注入的值;
     • value：提供的值，可以是任意类型，包括响应式的状态;
2. inject的使用：
   • inject函数用于在后代组件中注入由父组件或祖先组件提供的数据或方法;
   • 它也接受两个参数：key和defaultValue（可选）;
     • key：父组件提供值的key，必须与provide时使用的key相匹配;
     • defaultValue：当没有提供该依赖时使用的默认值，可以是具体的值，也可以是函数;

作用：

1. 跨层级传递数据：provide和inject允许我们在组件树中跨层级地传递数据，而无需通过props逐层传递。这使得在深层嵌套的组件中访问顶层组件的数据变得更加简单和高效;
2. 实现组件间的解耦：通过依赖注入，我们可以实现组件间的解耦。提供数据的组件和使用数据的组件之间不需要直接引用对方，从而降低了组件之间的耦合度，提高了代码的可维护性和复用性;
3. 响应式数据传递：provide和inject传递的数据可以是响应式的。当提供的数据发生变化时，所有依赖该数据的组件都会自动更新。这使得在多个组件之间共享响应式数据变得更加容易和高效;

21.Vue3中的Fragment是什么？它的用途是什么？

定义：
Fragment 是Vue3引入的虚拟节点，用于包裹多个子元素但不会渲染为真实DOM。它允许模板中存在多个根节点，解决了Vue2 必须有一个根元素的限制;

用途：

1. 简化页面结构：使用Fragment，开发者可以在不添加额外元素的情况下，将多个组件或元素包裹在一个逻辑容器中。这减少了不必要的DOM元素嵌套和深度，使得页面结构更加简洁;
2. 提高语义化：Fragment允许组件直接返回多个所需元素，而无需额外的包裹元素，这避免了在某些情况下因包裹元素而破坏HTML结构的语义化，从而使页面结构更加符合语义化标准；
3. 优化性能：通过减少DOM层级，Fragment特性有助于提升页面的渲染性能。避免不必要的DOM元素嵌套可以减少渲染和计算的工作量，从而提高页面的响应速度;

22.什么是Tree-shaking？它在Vue 3中如何工作？

定义：
‌Tree-shaking‌是一种通过静态代码分析去除未使用代码的技术，旨在减小项目体积，提高应用性能。在‌Vue3‌中，Tree-shaking通过其模块化架构和ES模块（ESM）的支持，实现了更高效的代码优化；

基本原理：
Tree-shaking依赖于ES6模块的静态结构特性。ES6模块使用静态导入和导出语法，这使得编译器可以在编译阶段确定模块之间的依赖关系以及输入和输出的变量。通过静态分析构建依赖图，然后移除未使用的代码，从而达到减小打包体积的目的‌；

工作步骤：
‌1. 模块分析‌：在编译阶段，Vue3会分析代码中引入的模块，确定哪些模块被实际使用，哪些模块未被使用。这是通过静态分析代码中的导入语句（import）来实现的；
2‌. 依赖关系构建‌：根据模块之间的引用关系，构建一个模块依赖图。这个依赖图描述了模块之间的依赖关系，以及哪些模块是被其他模块所依赖的；
3‌. 未使用模块标记‌：通过遍历模块依赖图，Vue3可以标记出哪些模块未被使用。这些未使用的模块将被视为可以被摇掉的“死代码”；
‌4. 代码优化和删除‌：在打包过程中，未使用的模块代码将被优化和删除，从而减小最终打包生成的文件体积。这可以通过删除未使用的模块代码、函数或变量来实现；
‌5. 副作用处理‌：在摇树过程中，需要处理一些可能产生副作用的代码。例如，某些模块可能在导入时执行一些初始化操作或注册全局变量。Vue3会通过一些机制来识别和处理这些副作用，以确保摇树过程的正确性；

23.Vue3中的Teleport是什么？它的用途是什么？

定义：
Teleport是Vue3引入的一个新特性，它允许我们将组件模板中的一部分内容渲染到DOM树中的其他位置，而不改变组件的逻辑结构；

工作原理：
Teleport组件通过其to属性指定目标容器，该属性接受一个选择器字符串或DOM元素作为值。当Teleport组件被渲染时，其内容会被“传送”到指定的目标容器中，而逻辑结构和事件处理仍然保留在原始组件中。这意味着，尽管DOM位置发生了变化，但组件的状态、方法和其他逻辑仍然属于父组件管理；

用途：

1. 减少 DOM 层级干扰‌ ：将如模态框、全局通知等需‌脱离父组件层级‌的内容渲染到顶层容器（如 body），避免父组件样式（如 overflow: hidden）导致显示异常‌；‌
2. 逻辑与样式解耦‌ ：组件代码仍保留在原位置维护逻辑（如数据、交互），仅渲染结果被传送到目标位置，提升代码可维护性‌；
3. 支持动态渲染位置‌ ：通过动态绑定to属性，可灵活切换渲染目标，适应不同场景需求（如多主题布局切换）；
4. 解决 z-index 冲突‌ ：将悬浮组件（如 Tooltip、Dropdown）传送到独立层级，避免因父组件z-index限制导致覆盖问题‌；

24.Vue3中的Suspense是什么？如何使用它来处理异步组件？

定义：
Suspense是Vue3提供的一个内置组件，用于处理异步依赖的加载状态。它可以在异步组件加载过程中显示一个过渡内容，加载完成后显示实际组件;

处理步骤：

1. ‌ 定义异步组件‌ ：使用defineAsyncComponent函数来定义一个异步组件。这个函数接受一个返回Promise的加载函数，Promise 解析后会返回一个组件定义;

2. 使用 Suspense 包裹异步组件‌ ：
   在模板中，使用 组件来包裹异步组件，并指定加载中和加载失败时的回退内容;

25.Vue3 中 defineAsyncComponent 函数的参数和使用场景是什么？

defineAsyncComponent是Vue3中用于定义异步组件的一个函数。它允许开发者按需加载组件，即在组件实际被使用时才进行加载，这有助于减少应用的初始加载时间，提升用户体验;
核心使用场景‌:

1. 首屏性能优化‌: 拆分非关键组件代码（如弹窗、复杂表单），减少首屏加载体积‌;
2. 动态按需加载‌：按需加载用户触发的功能模块（如弹窗、子页面）‌;
3. 第三方库懒加载‌：减少初始加载时间，仅在使用时加载重量级库（如富文本编辑器）‌;
4. 代码分割：结合构建工具生成独立代码块，优化缓存利用率‌;

参数形式：

1. 工厂函数‌：直接传入动态import()实现懒加载‌;
2. 配置对象‌：扩展加载状态、错误处理、超时等逻辑‌;

26.为什么Vue3选择Proxy替代Object.defineProperty？

1. 支持数组的直接监控：
   • Object.defineProperty：无法直接监听数组的变化（如 push、pop 等方法），需要通过包裹数组方法来间接实现;
   • Proxy：可以直接拦截对数组的操作，包括增删元素等操作，无需额外处理;
2. 动态属性的支持：
   • Object.defineProperty：只能在对象创建时定义响应式属性，后续添加或删除属性不会自动变为响应式;
   • Proxy：可以拦截对象属性的添加和删除操作，使新添加的属性自动成为响应式的，而不需要手动处理;
3. 性能优化：
   • Object.defineProperty：每次访问或修改属性时都会触发getter和setter，这在处理大型对象时会导致性能问题;
   • Proxy：通过拦截器机制，只有在实际发生属性访问或修改时才会触发相应的逻辑，减少了不必要的开销;
4. 更丰富的拦截操作：
   • Object.defineProperty：仅限于属性的读取和设置操作。
   • Proxy：提供了更多的拦截操作，如get、set、apply、construct等，能够更细粒度地控制对象的行为;
5. 更好的兼容性和扩展性：
   • Object.defineProperty：存在浏览器兼容性问题，并且某些情况下无法覆盖所有场景（如不可枚举属性）;
   • Proxy：是ES6标准的一部分，具有更好的跨浏览器兼容性，并且可以通过自定义拦截器实现更多功能;
6. 简化框架内部实现：
   • Object.defineProperty：由于其局限性，框架内部需要额外的逻辑来处理各种特殊情况;
   • Proxy：简化了框架内部的实现，使得代码更加简洁和易于维护;

27.简述Vue3如何处理组件的异步加载 ？

1. 使用 defineAsyncComponent：defineAsyncComponent是Vue3专门用于定义异步组件的函数。它接收一个返回Promise的加载函数，该Promise会在组件加载完成后resolve。当组件需要被渲染时，Vue会调用这个加载函数来加载组件；
2. 使用Suspense 组件：Suspense是Vue3新增的一个组件，它可以和异步组件配合使用，用于管理异步组件的加载状态。Suspense组件有两个插槽：#default 用于放置异步组件，#fallback 用于放置在异步组件加载过程中显示的过渡内容；
3. 路由懒加载：在Vue Router中，我们可以通过动态import来实现路由组件的异步加载。这种方式可以将不同路由的组件分割成不同的代码块，只有在用户访问相应路由时才会加载对应的组件代码，从而减少初始加载的代码量;

28.请描述一下Vue3中的虚拟DOM（Virtual DOM）和Diff算法的工作原理？

虚拟DOM：

• 定义：
  虚拟DOM是一种用JavaScript对象来表示真实DOM结构的技术。它并不是真实的DOM，而是一个轻量级的、对真实DOM的抽 象表示；
• 工作原理：
  • 当Vue组件的状态发生变化时，Vue会重新渲染组件，生成新的虚拟DOM树；
  • Vue会比较新旧两个虚拟DOM树的差异，这个过程称为“diff”；
  • 根据diff的结果，Vue会计算出需要更新的真实DOM部分，并仅对这些部分进行更新，而不是重新渲染整个页面；
• 优势：
  • 虚拟DOM将UI的状态与DOM的操作解耦，避免了频繁的真实DOM操作，从而提升了性能；
  • 它允许开发者以声明式的方式编写代码，提高了代码的可读性和可维护性；

Diff算法：

• 定义：
  • Diff算法是一种用于比较两个树形结构并找出它们之间差异的算法。在Vue3中，它用于比较新旧两个虚拟DOM树；
• 工作原理：
  • Diff算法的核心逻辑位于Vue的patch函数中。该函数会递归地比较新旧节点的类型、属性和子节点；
  • 如果节点类型相同，则进一步比较属性和子节点；如果类型不同，则直接替换节点；
  • 对于子节点的比较，Vue3采用了双端比较策略，即同时从新旧子节点的两端开始比较，以快速跳过相同部分；
  • 如果子节点中有key属性，Vue会使用哈希表来加速查找和匹配过程；
• 优化策略：
  • Vue3在编译阶段会标记静态节点，这些节点在渲染过程中不会被重新创建或比较，从而提高了性能；
  • Vue3还引入了批量更新策略，将多次状态变更合并为一次DOM操作，减少了不必要的重排和重绘；
• 优势：
  • Diff算法通过高效地比较新旧虚拟DOM树并仅更新变化的部分，减少了不必要的DOM操作，提升了性能；
  • 它使得Vue能够快速地响应状态变化并更新UI，提高了用户体验；

29.请解释一下Vue3中的全局API和实例API的区别？

‌全局API：

• 定义‌：全局API是定义在Vue构造函数或全局对象上的方法，它们可以在不依赖于Vue实例的情况下直接使用；
• 作用‌：全局API主要用于配置Vue应用的全局行为，如创建Vue应用实例、注册全局组件、全局指令、全局过滤器以及设置全局配置选项等。这些API在整个Vue应用中都是可用的，并且影响所有的Vue实例；

实例API：

• 定义‌：实例API是挂载在Vue实例上的方法或属性，它们只能在Vue实例的上下文中访问和使用；
• 作用‌：实例API主要用于管理和操作Vue实例的状态、属性、方法以及生命周期钩子等。这些API是Vue实例的核心部分，它们允许开发者在Vue实例的生命周期内进行各种操作，如数据绑定、事件处理、条件渲染等；

区别‌：

• 作用域不同‌：全局API的作用域是整个Vue应用，而实例API的作用域是单个Vue实例。这意味着全局API可以在任何地方调用，而实例API只能在特定的Vue实例中调用；
• 功能不同‌：全局API主要负责Vue应用的全局配置和实例创建，而实例API则负责Vue实例的状态管理和行为控制。全局API提供了对Vue应用的全局设置和配置，而实例API则提供了对Vue实例的详细控制和操作；
• 使用时机不同‌：全局API通常在应用初始化阶段使用，用于配置全局行为和创建Vue应用实例。而实例API则在Vue实例创建后使用，用于管理和操作Vue实例的状态和行为；

30.请解释一下Vue3中的静态提升（Static Tree Hoisting）和Patch Flag的优化策略？

静态提升：

• 定义：静态提升是Vue3编译器的一项重要优化策略。它的核心思想是将模板中不变的部分（静态节点）提升到渲染函数的外部，使它们只创建一次，避免每次重新渲染时都重复创建静态内容；
• 工作原理：
  • 在编译过程中，Vue3会分析模板中的静态内容，并将其提升为一个单独的静态节点；
  • 这些静态节点在渲染函数外部被创建，并在每次渲染时复用，避免了重复创建和销毁静态内容所带来的开销；
• 优势：
  • 静态提升可以显著提升渲染性能，特别是对于包含大量静态内容的页面；
  • 它减少了运行时动态开销，使得Vue3在处理大型或复杂的应用时更加高效；

Patch Flag优化策略：

• 定义：Patch Flag是Vue3为了优化虚拟DOM diff的一种机制。通过对每个动态节点进行标记，Vue可以精准地知道哪些节点是需要进行更新的，从而避免不必要的DOM操作；
• 工作原理：
  • 在编译阶段，Vue3会为动态节点打上Patch Flag，这些标记指示了节点的属性和状态变化；
  • 在渲染过程中，Vue会根据这些标记来快速判断哪些节点需要更新，哪些节点可以跳过；
  • 通过精准更新，Vue3减少了无用的虚拟DOM对比，提升了整体性能；
• 优化细节：
  • Vue3的Patch Flag系统支持多种标记类型，如静态节点、动态节点、有状态组件等，这些标记类型对应不同的处理逻辑；
  • Vue3还引入了Block Tree等优化技术，进一步减少了不必要的更新范围，提高了渲染效率；
• 优势：
  • Patch Flag优化策略使得Vue3能够更高效地处理视图更新，特别是在处理频繁状态变化的应用时；
  • 它减少了不必要的DOM操作，降低diff算法的复杂度，从而提升了性能；

31.简述Vue3跨域配置devServer参数的方法是什么 ？

1. 在 vue.config.js 中配置 devServer.proxy，定义代理路径（如 /api）和目标服务器地址；
2. 启用 changeOrigin 修改请求头，确保跨域请求被后端接受；
3. 使用 pathRewrite 按需重写请求路径（如删除代理前缀）‌；

32.Vue3 为什么不需要时间分片？

1. 虚拟DOM的高效优化‌：
   ‌ - 智能差异算法‌：Vue3的虚拟DOM采用更高效的Diff算法，仅对比并更新实际变化的节点，减少不必要的计算‌；
   ‌ - 批量更新机制‌：通过异步队列合并多次数据变更，统一触发渲染，降低DOM操作频率‌；
   ‌ - ‌性能瓶颈场景少‌：对于常规应用场景（非连续超100ms的CPU密集型计算），Vue3的虚拟DOM足以保证流畅性‌；
2. 响应式系统的升级‌：
   ‌ - ‌Proxy 替代 defineProperty‌：Vue3的响应式系统基于 Proxy，支持深层嵌套对象和数组的自动监听，减少手动优化需求‌；
   ‌ - ‌精准依赖追踪‌：仅更新依赖变化的组件，而非全量渲染，降低渲染压力‌；
3. 复杂度与收益的权衡‌：
   ‌ - ‌实现成本高‌：时间分片需要复杂的调度逻辑，与Vue3简洁的设计理念冲突‌；
   ‌‌ - 边际收益低‌：Vue3的默认性能已足够应对大部分场景，引入时间分片提升有限‌；
4. 异步渲染与浏览器协作‌：
   ‌‌ - 利用事件循环空闲时间‌：Vue3的异步渲染策略将更新任务拆解到浏览器空闲时段，避免主线程阻塞‌；

33如何解决 Vue3 中响应式丢失的问题？

1. 解构赋值导致响应式丢失‌：
   • 原因‌：直接解构 reactive对象或ref的 .value会提取原始值，脱离代理链‌；
   • 解决‌：
     • 使用toRefs或toRef包裹解构属性，维持响应式引用‌；
     • 优先通过原对象访问属性（如 state.a），避免解构‌；
2. 对象整体替换破坏响应式‌
   • 原因‌：直接替换reactive或ref的引用，导致代理失效‌；
   • 解决‌：
     • 修改对象属性而非整体替换；
     • 使用 ref 包裹对象，通过 .value 更新；
3. 异步更新未正确使用响应式 API‌
   • 原因‌：异步操作中直接赋值新数据，未通过代理触发更新‌；
   • 解决‌：
     • 使用ref或合并属性更新；
4. Props 解构或修改导致响应式断裂‌
   • 原因‌：解构props或直接修改非引用类型属性，脱离父级响应式链‌；
   • 解决‌：
     • 使用 toRefs(props) 或 toRef(props, ‘key’) 保持响应性‌；
     • 通过emit通知父组件修改数据，避免直接操作props‌；

34.Vue3中的工程化工具Vite是什么？它有什么优势？

‌定义‌：Vite是一个由尤雨溪开发的面向现代前端开发的构建工具，专门为 Vue3项目设计，但也能很好地支持其他框架，如 React、Svelte等。它旨在提供更快的开发体验，让开发者能够更高效地进行项目开发；
原理：
Vite基于原生ES模块（ES Modules）实现，在开发环境下无需打包，直接利用浏览器的原生模块加载功能，按需加载各个模块。在生产环境中，Vite则使用Rollup进行打包，将代码进行优化和压缩；
‌核心优势‌：

1. 极速冷启动‌：跳过传统打包工具的预编译阶段，直接启动开发服务器，启动时间几乎与项目规模无关‌；
2. 高效热更新：仅编译修改的模块，浏览器直接加载更新后的代码，响应速度达到毫秒级‌；
3. 按需编译‌：基于浏览器原生ESM，动态加载所需模块，减少不必要的资源加载‌；
4. 轻量插件系统‌：集成Rollup插件生态，同时提供专属插件API，扩展性强‌；
5. 生产优化‌：默认支持代码分割、Tree-Shaking等优化策略，输出高效生产代码‌；
6. 兼容现代浏览器‌：默认支持现代浏览器特性（如 ES6+），减少兼容性代码冗余‌；

与传统打包工具对比：

• Webpack：Webpack是一个功能强大的打包工具，它可以处理各种复杂的项目需求，但配置相对复杂，启动和热更新速度较慢。而Vite配置简单，启动和热更新速度快，更适合快速开发和小型项目；
• Rollup：Rollup是一个专注于JavaScript模块打包的工具，它的打包性能较好，但在开发环境下的体验不如Vite。Vite在开发环境下无需打包，提供了更流畅的开发体验；

适用场景‌：

• 快速原型开发：由于Vite的快速启动和热更新特性，非常适合快速搭建项目原型，让开发者可以快速验证想法；
• 小型项目：对于小型项目，Vite的简单配置和高效性能可以帮助开发者更轻松地完成项目开发；
• 现代前端框架项目：Vite对Vue3、React 等现代前端框架有很好的支持，能够充分发挥这些框架的优势；

35.谈谈Pinia?

定义：
Pinia是Vue.js官方推荐的状态管理库，专为Vue3设计，同时也兼容Vue2。它旨在提供一种更简洁、灵活且可扩展的方式来管理应用程序的状态;
核心优势：

1. 轻量级：Pinia的设计非常轻量，减少了不必要的复杂性，易于上手和使用；
2. 类型支持：Pinia提供了良好的TypeScript支持，能够更好地与TypeScript项目集成，提升开发体验；
3. 模块化：Pinia支持模块化的状态管理，可以将状态分割成多个store，便于管理和维护；
4. 响应式：Pinia使用Vue3的响应式系统，确保状态变化能够自动更新到视图中；
5. 简洁的 API：Pinia的API设计简洁明了，易于理解和使用，减少了学习成本；
6. 插件支持：Pinia支持插件，可以扩展其功能，满足特定需求；
7. 开发者工具：Pinia提供了与Vue Devtools的集成，方便开发者调试和查看状态变化；
8. 支持 SSR：Pinia可以与服务器端渲染（SSR）一起使用，适合构建现代化的应用；

Pinia 与 Vuex 核心对比‌：

1. API 设计‌：
   • Vuex‌：强制分离mutations（同步）与 actions（异步），需通过commit提交变更‌；
   • Pinia‌：合并mutations至actions，允许直接修改state，简化流程（如 this.count++）‌；
2. 模块化方式‌：
   • ‌Vuex‌：需嵌套modules，易导致代码臃肿‌；
   • ‌Pinia‌：独立Store定义，天然扁平化，支持组合式逻辑复用‌；
3. TS 支持‌：
   • ‌Vuex‌：需额外配置类型声明，支持较弱‌；
   • ‌Pinia‌：原生类型推导，defineStore自动生成类型‌；
4. 响应式系统‌：
   • Vuex‌：基于Vue2 的 Object.defineProperty‌；
   • ‌Pinia‌：基于Vue3的 Proxy，支持深层嵌套对象监听‌；
5. 体积与性能‌：
   • Vuex‌：约10KB，适合中大型项目‌；
   • ‌Pinia‌：仅1KB，轻量高效‌；
6. 适用场景‌：
   • ‌Vuex‌：适合需要严格数据流管控的遗留项目‌；
   • ‌Pinia‌：推荐用于Vue3新项目，灵活性高、开发效率快‌；