【vue高频面试题】第一题：Vue 3 相比 Vue 2，有哪些重大变化？

Vue 3 与 Vue 2 关键差异与高频面试要点

面向"面试与复习"的精炼笔记，已去除重复内容并规范为 Markdown。围绕响应式、组合式 API、性能与体积、TypeScript 支持，以及新特性（Teleport、Suspense、多根节点、自定义渲染器）进行归纳，并提供可直接复用的示例代码。

核心差异速览

• 响应式系统：Vue 3 采用 Proxy 替代 Vue 2 的 Object.defineProperty。
• 组合式 API：setup、ref、reactive、computed 等，逻辑复用更自然，适合大型项目。
• 性能与体积：编译期与运行时优化更深入，Tree-shaking 更彻底，包体更小。
• TypeScript 支持：以 TS 重写，类型推断更强，开发体验提升明显。
• 新特性：Teleport、Suspense、多根节点支持，自定义渲染器能力更强。

响应式系统

• 为什么使用 Proxy：
  • 原生支持属性的新增/删除监听，无需 Vue.set。
  • 更好支持数组索引与 length 变化。
  • 更符合现代语言特性，性能与可维护性更优。
• ref 与 reactive 的取舍：
  • ref 适合基本类型或需要单独引用的值，访问需使用 .value。
  • reactive 适合对象/数组整体响应式代理，直接解构可能丢失响应需谨慎。

组合式 API（Composition API）

• 优势：高内聚的逻辑复用、可抽取为 composables，跨文件共享更顺畅；对复杂业务与大型组件更友好。
• 与 Options API 共存：简单组件仍可用 Options；复杂场景优先 Composition。
• 与 TypeScript 的协作：类型系统更完善，ref<T>/reactive<T> 泛型增强开发体验。

示例：

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const double = computed(() => count.value * 2);
    const increment = () => count.value++;
    return { count, double, increment };
  }
}

性能与体积优化

• 编译器优化：静态节点提升、事件绑定优化，减少运行时负担。
• 虚拟 DOM 改进：更高效的 diff 与 patch 策略。
• Tree-shaking：未使用的 API（如 Teleport）不会进入最终包体。

TypeScript 支持

• 框架以 TypeScript 重写：类型定义更完善、推断更准确。
• Props 与组件类型推断更强，减少样板代码与类型声明负担。

示例：

import { ref } from 'vue';
const count = ref<number>(0);

新内置组件与特性

• Teleport：将子组件渲染到指定的 DOM 容器，适用于弹窗/浮层等全局层级内容。

<template>
  <Teleport to="#modal">
    <div class="modal">这是弹窗内容</div>
  </Teleport>
  <div id="modal"></div>
  <button @click="open = true">打开</button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const open = ref(false);
</script>

• Suspense：为异步组件提供占位与完成态切换，优化加载体验。

<template>
  <Suspense>
    <template #default>
      <AsyncView />
    </template>
    <template #fallback>
      <div>加载中...</div>
    </template>
  </Suspense>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'
const AsyncView = defineAsyncComponent(() => import('./AsyncView.vue'))
</script>

• 多根节点支持：组件模板不再强制单根，结构更简洁，避免多余包裹。
• 自定义渲染器：扩展到非 DOM 场景（原生、Canvas 等）。

高频追问与要点速答

• 为什么 Proxy 更优？支持属性新增/删除与数组细粒度监听，API 更现代。
• ref / reactive 如何选择？值与基本类型用 ref，对象/数组整体用 reactive。
• Composition API 的优势？逻辑复用、模块化、与 TS 协同更好，适合复杂业务。
• 编译与性能优化体现？静态提升、事件优化、Tree-shaking，更小更快。
• Teleport/Suspense 的场景？弹窗、全局浮层与异步加载占位。
• 多根节点的好处？更简洁的结构，减少无意义包裹。

总结

Vue 3 在响应式、API 设计、性能与类型系统方面全面升级。掌握核心差异与常用场景（弹窗、异步组件、类型推断），再结合可落地的示例代码，基本可以覆盖多数面试与复盘问答。