Vue3 高频面试题，这些知识点你得吃透

terry 19小时前阅读数 20 #SEO

文章标签 Vue3 面试题

准备 Vue3 相关面试时，总会碰到一些核心问题：框架和 Vue2 差异在哪？组合式 API 到底好在哪？响应式原理咋优化的？下面整理了高频问题，从基础到进阶帮你理清楚～

Vue3 和 Vue2 核心区别有哪些？

Vue3 从性能、语法、响应式、生态工具等层面都做了升级：

性能优化：编译阶段加入静态提升、补丁标志，运行时用 Proxy 优化响应式，更新时只处理动态内容；
语法拓展：新增组合式 API（Composition API），还有 <script setup> 语法糖简化代码；
响应式原理：用 Proxy 替代 Object.defineProperty，能监听数组变化、对象新增/删除属性，响应式更全面；
生态工具：默认搭配 Vite 作为开发工具，替代 Vue CLI，启动、热更新速度更快；
TS 支持：对 TypeScript 类型推导更友好，组合式 API 和语法糖让 TS 集成更自然。

组合式 API（Composition API）比选项式 API 好在哪？

很多人纠结选选项式还是组合式,实际场景里组合式优势很明显：

逻辑复用更干净：选项式用 mixins 容易出现命名冲突（多个 mixins 里有同名方法/数据）；组合式用函数封装逻辑（比如写个 useFetch 函数处理接口请求），逻辑独立，复用性高；
代码组织更灵活：大型组件里，选项式的 data methods computed 把逻辑拆得很散；组合式能按功能把相关逻辑聚在一起（比如表单验证、接口请求逻辑各自封装成函数），维护起来更顺；
TS 友好度拉满：选项式里 this 的类型模糊，组合式的 ref reactive 能通过泛型精准推导类型（const count = ref<number>(0)），和 TS 结合更丝滑。

Vue3 响应式原理做了什么优化？

Vue2 用 Object.defineProperty 实现响应式，有不少痛点：数组下标/长度变化监听不到（arr[0] = 1 不触发更新）、对象新增属性得用 $set，Vue3 换成 Proxy 后解决了这些问题：

监听更全面：Proxy 能劫持整个对象，数组的 push/pop、对象新增/删除属性都能监听到；
性能更高效：Proxy 是“懒代理”，访问对象属性时才建立响应式关联，不用像 Vue2 那样递归遍历所有属性，初始化速度更快；
代码更简洁：不用手动 $set 处理新增属性，框架自动感知变化。

setup 语法糖怎么用？优势是啥？

<script setup> 是 Vue3 最常用的语法糖，写组件时爽感拉满：

怎么用？ 直接在 <script> 标签加 setup（<script setup lang="ts">），不用写 export default，组件自动注册；导入的子组件直接用，不用在 components 里注册；
优势在哪？ 代码量暴减！以前写 props emits 要写一堆配置，现在用 defineProps defineEmits 秒搞定（const props = defineProps<{ msg: string }>()）；和 TS 结合更自然， props 类型直接用 TS 接口声明；编译时做了优化，性能比普通 setup 更高。

Teleport 组件解决了什么场景问题？

做弹窗、模态框时，你肯定碰到过“父组件样式限制导致弹窗被截断”的坑。Teleport 就是专门解决 DOM 层级问题的：
比如父组件加了 overflow: hidden，弹窗在父组件里渲染会被挡住，用 Teleport 可以把弹窗的 DOM 渲染到指定容器（body），保证弹窗层级最高，同时弹窗的逻辑（比如关闭事件、数据交互）还留在原组件里，不影响组件通信。

Vue3 里自定义指令怎么写？和 Vue2 有啥不同？

自定义指令在 Vue3 里更灵活，钩子函数也变了：

钩子函数更新：Vue2 是 bind inserted 等钩子，Vue3 换成了 created（指令创建时）、beforeMount mounted beforeUpdate 等，和组件生命周期更对齐；
定义方式：全局指令用 app.directive('指令名', { 钩子 })，局部指令在组件里写 directives: { 指令名: { 钩子 }}；

举个例子：写个自动聚焦指令 v-focus，mounted 时执行 el.focus()：

// 全局指令  
app.directive('focus', {  
  mounted(el) {  
    el.focus()  
  }  
})  
// 局部指令（script setup 里）  
const vFocus = {  
  mounted(el) {  
    el.focus()  
  }  
}

Vite 作为 Vue3 标配工具，和 Vue CLI 差异在哪？

Vite 不是简单替代 Vue CLI，而是从构建原理、开发体验、生产打包全方位升级：

启动速度：Vite 基于浏览器原生 ESModule，开发时不打包，启动秒级；Vue CLI 基于 webpack，项目大了启动慢到怀疑人生；
热更新（HMR）：Vite 热更新速度和项目大小无关，改一行代码瞬间更新；webpack 热更新随项目变大越来越慢；
生产构建：Vite 默认用 Rollup 打包，输出体积更小、性能更优；Vue CLI 用 webpack 打包，配置复杂；
配置成本：Vite 配置文件是 vite.config.ts，基于 ESModule 写，简洁直观；Vue CLI 要学 webpack 那套复杂配置，门槛高。

Vue3 对 TypeScript 支持提升体现在哪？

Vue3 把 TS 支持当成核心卖点，主要体现在：

组合式 API 类型推导：ref reactive 能通过泛型指定类型（const list = ref<number[]>([])），TS 能自动推导响应式数据类型；
defineComponent 增强：用 defineComponent 包裹组件选项，TS 能精准推导 props methods 的类型；
setup 语法糖 + TS：defineProps 可以直接用 TS 接口声明类型（defineProps<{ userId: number }>()），不用额外写 PropType；
响应式 API 泛型支持：reactive ref 都支持泛型，复杂对象类型定义更简单。

Vue3 性能优化手段有哪些？

Vue3 从编译时、运行时、生态工具多维度做了优化：

编译时优化：静态提升（把不依赖响应式的节点缓存，避免重复渲染）、补丁标志（给动态节点打标记，更新时只处理这些节点）、按需更新（用 block 树结构，只更新变化的区块）；
运行时优化：Proxy 响应式替代 Object.defineProperty，减少不必要的遍历和劫持；
组件级优化：Suspense 组件优雅处理异步组件加载（比如加载时显示骨架屏）；keep-alive 缓存组件实例，减少重复渲染；
打包优化：Tree - shaking 特性让打包体积更小（只打包用到的 API）。

怎么理解 Vue3 的 Tree - shaking 特性？

Tree - shaking 是“摇掉”没用的代码，让打包体积更小，Vue3 基于 ESModule 的静态导入导出实现这一点：
比如你只用了 ref 和 reactive，打包时只会把这两个 API 打包进去，像 computed watch 这些没用到的就被“摇掉”，Vue2 是整体导出（import Vue from 'vue'），即使只用部分功能，也会打包整个 Vue，体积大很多。

这些问题基本覆盖了 Vue3 面试的核心考点，从原理到实战场景都有涉及，面试前把这些逻辑理清楚，再结合项目经验展开讲，说服力拉满～