Vue3 与 TypeScript 前端高频面试题实战解析

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 的核心区别

回答此类问题可从思想设计、语法层面、底层原理三个维度展开：

1. 思想与设计：Vue 3 更贴近原生 JS，去除了抽象的过滤器和混入，改用 Hooks 模式（Composition API）。构建工具从 Webpack 转向 Vite，状态管理 Vuex 演变为 Pinia。
2. 语法层面：双向绑定、Watch/WatchEffect、组件实例暴露（public/private）、生命周期钩子名称变更、新增 Teleport/Emit/Fragments 等。
3. 底层原理：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 对象，写成函数返回新对象可保证每个实例拥有独立的数据副本，避免状态污染。

组件通信方式

1. 状态管理：Pinia/Vuex（全局状态）。
2. Props / Emit：父子通信。
3. Slot：内容分发。
4. 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 核心知识点。