Vue3 与 TypeScript 前端高频面试题详解
初探 Vue 与核心特性
谈谈你对 Vue 的理解及版本演进
Vue 是一个渐进式 JavaScript 框架。从 2013 年诞生，到 2016 年发布 2.0，再到 2020 年 9 月推出 3.0（代号海贼王），以及 2021 年 8 月的 3.2 版本引入 <script setup> 语法糖。
Vue 3 值得关注的核心新特性：
- 组合式 API (Composition API)：相比选项式 API，它更贴近原生 JS 逻辑，方便封装和复用逻辑。
- 单文件组件语法糖 (
<script setup>)：在<script>标签中直接编写顶层代码，无需setup函数包裹，代码更简洁。 - Teleport 组件：允许将组件的一部分模板'传送'到 DOM 结构的其他位置，常用于模态框等场景。
- Fragments (片段)：正式支持多根节点的组件，不再需要包裹一个额外的 div。
- Emits 选项：用于声明组件触发的自定义事件，
.native修饰符已移除，需显式声明以避免多次触发警告。 - Suspense：实验性功能，用于处理异步依赖的加载状态。
- 样式增强：支持在
<style>中使用v-bind绑定 CSS 变量，以及 scoped 样式的全局规则和插槽内容规则。
注：Vue 3 发展经历了从类似 Vue 2 的选项式 API，到更接近原生 JS 的组合式 API 的演变，旨在提升代码的可维护性和逻辑复用能力。
常用指令与原理
常用指令速查
- 插值表达式
{{}}：JS 环境，支持三元运算符、拼接等。 - v-text / v-html：覆盖元素内容，注意 XSS 风险。
- v-cloak / v-pre / v-once：开发阶段优化或特殊渲染控制，生产环境较少使用。
- v-bind (:prop)：动态绑定属性，减少 DOM 操作，简写为冒号。
- v-on (@event)：事件监听。建议函数名以
on开头，定义在 methods 中，配合事件修饰符（stop, prevent, key 等）使用。 - v-for：遍历数组、对象或数字。需注意
key的作用和与v-if的优先级问题。 - v-if / v-show：条件渲染与显示控制。
- v-memo：了解即可，用于指定缓存区域避免重复渲染。
v-for 中 key 的作用与原理
- 作用：唯一标识列表项，防止出现渲染 bug，提升 diff 算法性能。
- 原理：底层 Diff 算法在同层比较时，根据
key决定是替换、修改还是删除节点，而非仅靠索引。
v-if 与 v-for 的优先级
- Vue 2.x：
v-for优先级高于v-if。 - Vue 3.x：
v-if总是优先于v-for生效。 - 原因：Vue 3 调整优先级是为了减少不必要的渲染开销。若需在 Vue 2 中避免重复渲染，建议将判断提升至父元素。
v-if 与 v-show 的区别与选型
两者都能控制元素隐藏显示，但实现机制不同：
- v-if：真正的条件渲染。惰性执行，初始条件为假时不渲染。切换时会销毁/重建事件监听器和子组件。适用于运行时很少改变条件的场景。
- v-show：始终渲染，通过 CSS
display属性切换。适用于需要频繁切换的场景（如 Tab 切换、弹窗）。
<!-- v-if 示例 -->
<div v-if="condition">内容</div>
<!-- v-show 示例 -->
<div v-show="condition">内容</div>
额外知识：
visibility: hidden隐藏元素但仍占用空间，而display: none完全不占用布局空间。
响应式系统与生命周期
Vue 2 与 Vue 3 的核心区别
回答此类问题可从思想设计、语法层面、底层原理三个维度展开：
- 思想与设计：Vue 3 更贴近原生 JS，去除了抽象的过滤器和混入，改用 Hooks 模式（Composition API）。构建工具从 Webpack 转向 Vite，状态管理 Vuex 演变为 Pinia。
- 语法层面：双向绑定、Watch/WatchEffect、组件实例暴露（public/private）、生命周期钩子名称变更、新增 Teleport/Emit/Fragments 等。
- 底层原理：Vue 2 使用
Object.defineProperty，Vue 3 使用Proxy。Diff 算法也有优化。
MVVM 与 MVC 模式理解
- MVC：Model-View-Controller。后端常见，控制器负责调度，V 与 M 耦合度较高。
- MVVM：Model-View-ViewModel。前端主流思想。ViewModel 作为桥梁，自动同步数据变化，解决了传统 jQuery 时代大量手动操作 DOM 的问题。
注意：Vue 并非纯 MVVM 框架，但其设计深受启发，文档中常使用
vm表示实例。
计算属性 vs 侦听器
- 计算属性 (computed)：有缓存，依赖响应式数据变化时重新计算。适合一个数据依赖另一个数据的场景（如购物车总价）。
- 侦听器 (watch)：无缓存，监听特定数据变化并执行副作用。适合监控地址栏、搜索输入等场景。
浏览器运行机制简述
- 主进程：管理 Tab 进程、交互、下载。
- 渲染进程：每个 Tab 对应一个，包含 GUI 渲染线程（DOM/CSS 树构建）、JS 引擎线程、事件线程等。
- GPU 进程：负责 3D 绘制。
JS 单线程与执行效率
JS 是单线程，这是为了避免 DOM 操作的复杂性（多线程可能导致冲突）。为保证效率，遇到耗时操作（如异步请求）会交给其他线程处理，完成后回调放入执行栈。HTML5 Web Worker 允许创建子线程，但不得操作 DOM。
回流与重绘优化
- 回流 (Reflow)：布局流改变（如宽高、位置变化），触发重排。
- 重绘 (Repaint)：样式改变但不影响布局（如颜色、背景）。
- 优化策略：减少 DOM 操作频率，批量修改样式，避免频繁读取导致强制同步回流。
虚拟 DOM 的作用
通过 JS 对象描述真实 DOM，对比差异后批量更新，减少浏览器 Reflow/Repaint 次数，优化性能。
生命周期详解
- created：数据观测完成，可发起异步请求，不可操作 DOM。
- mounted：DOM 挂载完成，可进行 DOM 操作、初始化第三方库。
- updated：数据更新后，DOM 已更新。
- beforeUnmount / unmounted：Vue 3 替代了 Vue 2 的
destroyed，用于清理定时器、事件监听等防止内存泄漏。 - activated / deactivated：配合
<keep-alive>使用，缓存组件时的激活与停用。
父子组件生命周期顺序：父 created -> 子 created -> 子 mounted -> 父 mounted。
$nextTick 原理与应用
Vue 更新 DOM 是异步的。$nextTick 确保在下次 DOM 更新循环结束后执行回调。底层利用 Promise/MutationObserver/setTimeout 将任务放入微任务队列。
组件编程与通信
组件概念与好处
封装 HTML 代码，提高复用性，便于维护。分为公共组件（增加复用性）和页面组件（增加可读性）。
Props 与 Emit
- Props：父传子，支持类型校验、默认值、验证器。
- Emit：子传父，通知父组件进行进一步处理。
单向数据流
数据由父组件流向子组件，禁止子组件直接修改 props。这有助于追踪数据来源，避免数据混乱。
data 为何写成函数
组件实例共享同一个 data 对象，写成函数返回新对象可保证每个实例拥有独立的数据副本，避免状态污染。
组件通信方式
- 状态管理：Pinia/Vuex（全局状态）。
- Props / Emit：父子通信。
- Slot：内容分发。
- Ref / Provide-Inject：跨层级通信。
路由与导航守卫
路由模式
- Hash 模式：URL 带
#，兼容性好，无需服务器配置。 - History 模式：URL 美观，但刷新需服务器配置 fallback 路径。
SPA 优缺点
- 优点：体验流畅，减少 HTTP 请求。
- 缺点：首屏加载慢，SEO 不利（可通过 SSR/Nuxt.js 解决）。
导航守卫
- 全局前置：
router.beforeEach，常用于鉴权。 - 路由独享：
beforeEnter。 - 组件内：
beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave。
权限控制：通常结合后端接口动态添加路由规则，利用
meta字段存储权限标识。
异步请求与网络
XHR vs Fetch vs Axios
- XHR：老牌，基于回调，易形成回调地狱。
- Fetch：标准 API，基于 Promise，不支持超时拦截。
- Axios：社区库，功能更强，支持拦截器、取消请求、自动转换 JSON。
跨域解决方案
- 开发环境：代理配置（
vue.config.js或vite.config.js）。 - 生产环境：后端 CORS 配置或 Nginx 反向代理。
HTTP 状态码
- 2xx：成功。
- 3xx：重定向。
- 4xx：客户端错误（401 未授权，403 禁止访问，404 不存在）。
- 5xx：服务端错误。
TypeScript 基础
any 与 unknown
- any：任意类型，关闭类型检查，不安全。
- unknown：未知类型，更安全，使用前需进行类型收窄或判断。
interface 与 type
- interface：描述对象结构，支持继承和合并，更适合定义对象类型。
- type：类型别名，更灵活，可定义联合类型、元组、泛型约束等。
泛型应用场景
广泛用于 Vue 的 ref, reactive, 自定义 Hook 以及 API 请求封装，确保类型安全。
修饰符
- public：默认，类内外均可访问。
- private：仅限类内部。
- protected：类内部及子类可访问。
- readonly：只读属性。
本文整理自前端技术面试常见问题，旨在帮助开发者系统梳理 Vue3 与 TypeScript 核心知识点。