JavaScript大前端

Vue3 与 TypeScript 核心面试题实战解析

Vue3 与 TypeScript 面试核心知识点梳理，涵盖响应式原理、生命周期、组合式 API、路由机制及类型系统。重点解析 Vue2 与 Vue3 的区别，v-if 与 v-show 性能差异，ref 与 reactive 选型，以及 Axios 封装策略。同时包含浏览器运行机制、回流重绘优化及 TS 泛型应用场景，适合前端开发者查漏补缺。

草莓泡芙发布于 2026/4/9更新于 2026/10/2593 浏览

Vue3 与 TypeScript 核心面试题实战解析

Vue3 与 TypeScript 核心面试题实战解析

Vue 基础与版本演进

Vue 是一个渐进式 JavaScript 框架。从 2013 年诞生，历经 2.0、2.6 版本，到 2020 年 9 月发布 Vue 3.0（代号海贼王），再到 2021 年 8 月推出 <script setup> 语法糖。

Vue 3 新特性概览

组合式 API (Composition API)：相比选项式 API，更贴近原生 JS，方便逻辑复用和封装。
Script Setup 语法糖：在单文件组件中直接编写脚本，无需 setup 函数包裹。
Teleport 组件：将模板的一部分'传送'到 DOM 结构外层，常用于模态框等场景。
Fragments (片段)：正式支持多根节点的组件。
Emits 选项：声明自定义事件，.native 修饰符已移除。
Suspense：实验性异步依赖处理组件。
CSS 变量绑定：在 <style> 中使用 v-bind 实现状态驱动的 CSS 变量。

常用指令详解

基础指令

{{}}：大括号内为 JS 环境，支持三元表达式或拼接。
v-text/v-html：覆盖元素内容，注意 XSS 风险。
v-cloak/v-pre/v-once：用于优化渲染性能或防止闪烁，日常开发较少使用。
v-bind：动态绑定属性，简写为 :。减少 DOM 操作。
v-on：事件监听，推荐函数名以 on 开头，配合事件修饰符（stop, prevent）及系统修饰符使用。
v-for：遍历数组、对象或数字。key 的作用至关重要，底层 Diff 算法根据 key 决定节点替换、更新或删除，避免 Bug 并提升性能。
v-if/v-show：控制显示隐藏。v-if 是条件渲染，惰性执行；v-show 通过 CSS display 切换，适合高频切换场景。
v-memo：类似 React.memo，用于指定缓存区域，避免重复渲染。

v-if 与 v-for 优先级

Vue 2.x：v-for 优先级高于 v-if。
Vue 3.x：v-if 优先级高于 v-for，以减少不必要的渲染开销。

Vue2 与 Vue3 核心区别

响应式原理

Vue 2：基于 Object.defineProperty 劫持属性变化。无法监听对象新增属性或数组索引修改，需使用 $set 或 $forceUpdate。
Vue 3：基于 Proxy 拦截整个对象。可监听未定义属性，支持数组索引修改，且拦截方式更多（get, set 等 11 种）。升级原因包括性能优化、对 ES6+ 特性支持更好以及 TypeScript 友好度提升。

生命周期

Vue 2：created, mounted, updated, destroyed。
Vue 3：
- 选项式：created, mounted, updated, unmounted（替代 destroyed）。
- 组合式：onMounted, onUpdated, onUnmounted 等。
- 新增：beforeMount, beforeUpdate, beforeUnmount, activated, deactivated, errorCaptured。

其他差异

语法：Vue 3 去掉了过滤器、混入（Mixins），改用 Hooks 模式；支持 Composition API；构建工具由 Webpack 转向 Vite；状态管理 Vuex 演变为 Pinia。
组件通信：单向数据流原则不变，父传子用 props，子传父用 $emit。

组件编程与通信

Props 与 Emit

Props：接收父组件传递的数据，支持类型验证和默认值。
Emit：组件内部触发事件通知父组件，Vue 3 中推荐使用 defineEmits。

v-model 原理

本质是 :model-value 和 @update:model-value 的语法糖。
支持多个 v-model 时，可通过参数指定 prop 名称。

组件通信方式

父子：props / emit
跨级：provide / inject
兄弟/任意：EventBus (Vue 3 需引入 mitt) / Pinia / Vuex
实例引用：ref / $parent / $children

组合式 API (Composition API)

ref vs reactive

ref：用于基本类型，也可用于对象。访问时需 .value。
reactive：仅用于对象，返回的是代理对象，无需 .value。

watch vs watchEffect

watch：懒执行，需指定监听源，可获取旧值和新值。
watchEffect：立即执行，自动追踪依赖，无回调参数。

路由机制 (Vue Router)

模式选择

Hash 模式：URL 带 #，兼容性好，无需服务器配置。
History 模式：URL 美观，但刷新需服务器配置 fallback 路径。

导航守卫

全局前置：router.beforeEach，常用于鉴权。
路由独享：beforeEnter。
组件内：beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave。

动态路由与权限

根据后端接口返回的菜单权限，动态调用 addRoute 添加路由规则。
利用 meta 字段存储面包屑、缓存标识等信息。

网络请求 (Axios)

XHR vs Fetch vs Axios

XHR：回调地狱，不推荐。
Fetch：Promise 风格，官方标准，但错误处理较弱。
Axios：社区维护，功能强大，支持拦截器、取消请求、JSON 转换。

封装建议

创建 axios 实例，配置 baseURL、timeout。
请求拦截器：统一添加 token、loading 状态。
响应拦截器：统一处理错误码、数据解包、token 过期处理。

跨域解决方案

开发环境：vue.config.js 配置 devServer.proxy。
生产环境：Nginx 反向代理或后端 CORS 配置。

TypeScript 基础

类型系统

any：任意类型，失去类型检查。
unknown：更安全，使用前需类型收窄。
never：永不存在的类型，通常用于抛出异常或死循环。
void：无返回值。

Interface vs Type

Interface：描述对象结构，支持继承和合并。
Type：更灵活，可表示联合类型、元组、泛型约束等。

泛型应用

在 ref, reactive, axios 请求封装中广泛使用，确保类型安全。

修饰符

public/protected/private：控制类成员访问权限。
readonly：只读属性。

浏览器运行机制

进程与线程

浏览器是多进程的，每个 Tab 对应一个渲染进程。
JS 是单线程的，基于执行栈，通过事件循环处理异步任务。

回流与重绘

回流 (Reflow)：布局改变，如宽高变化，代价高。
重绘 (Repaint)：样式改变但不影响布局，如颜色变化。
优化：批量修改 DOM，避免频繁读写样式，使用 transform 代替 top/left。

总结

本文梳理了 Vue3 与 TypeScript 面试中的高频考点，涵盖响应式原理、生命周期、组件通信、路由机制及类型系统。掌握这些核心概念，结合实战项目经验，能有效应对前端技术面试。