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

v-if 与 v-show 的区别及场景

• 相同点：都用于控制元素隐藏显示。
• 不同点：
  • v-if 是真正的条件渲染，切换时会销毁/重建事件监听器和子组件，惰性渲染。
  • v-show 始终渲染元素，仅通过 CSS display 属性切换。
• 选择建议：
  • 频繁切换（如 Tab 选项卡、登录弹框）：推荐使用 v-show。
  • 运行时很少改变条件：推荐使用 v-if。

v-memo 理解

参考 React 的 memo，主要用于指定盒模型缓存，避免重复渲染。

Vue2 与 Vue3 的区别

框架层面

• 思想设计：Vue 2 封装较多，抽象层级高；Vue 3 更贴近原生 JS，支持 Composition API 和 Hooks 模式。
• 构建工具：Webpack 改为 Vite。
• 状态管理：Vuex 改为 Pinia。
• 语法层面：去掉了过滤器、混入；增加了 Teleport、Fragments、Composition API、SFC Script Setup 等。
• 底层原理：Vue 2 使用 Object.defineProperty，Vue 3 使用 Proxy。

MVVM 与 MVC 理解

• MVC：Model-View-Controller。后端常见，单向通信，将 M 和 V 代码分离。
• MVVM：Model-View-ViewModel。前端常见，双向通信。ViewModel 作为桥梁，自动同步数据变化，减少手动 DOM 操作。
• 区别：MVC 多为后端，MVVM 多为前端；MVC 单向，MVVM 双向。

注：Vue 并非纯 MVVM 框架，但设计受其启发，文档中常使用 vm 表示实例。

选项式 API：表单输入、类与样式、自定义指令

class 与 style 绑定

• 目的：使用模型数据动态绑定类名或样式，减少 DOM 操作。
• 语法：
  • :class="data 中的键"
  • :class="{类名：布尔值}"
  • :class="[类名，... ]"
  • :style="{css 属性名：属性值}"
• 场景：Tab 选项卡、文章字体、后台菜单切换。

自定义指令

• 能干嘛：封装 DOM 操作。
• 好处：减少冗余，提高复用。
• 场景：全屏、拖拽、复制、水印、登录按钮鉴权。

双向绑定 v-model 原理

它是 :value 和 @input 的语法糖。

Vue2 响应式原理

通过 Object.defineProperty 劫持模型数据变化。

Vue2 响应式失效场景及解决

1. 模型未定义。
2. 通过数组索引修改。
3. 新增对象属性。

• 解决：使用 $forceUpdate 强制刷新，或使用 $set 单独写数据劫持。

Vue3 响应式原理

通过 Proxy 劫持模型数据变化。

• Object.defineProperty 只能拦截对象属性，无法监听新增属性。
• Proxy 可拦截整个对象，支持 11 种拦截方式（get, set 等），可监听未定义属性。

选项式 API：响应式、生命周期

计算属性 vs 侦听器

• 计算属性 (computed)：
  • 有缓存，依赖响应式数据。
  • 调用不加小括号。
  • 场景：一个数据依赖另一个数据计算结果（如购物车总价）。
• 侦听器 (watch)：
  • 无缓存，监控数据变化。
  • 场景：二维码切换登录、监控地址栏、百度搜索等。
• Watch 两大属性应用场景：
  • deep：深度监听对象类型数据（如 ElementUI 二次封装的 form）。
  • immediate：立即执行监听（如面包屑首次打开显示对应菜单）。

浏览器运行机制

• 主进程：负责创建销毁 tab 进程、交互、下载。
• 渲染进程：每个 tab 对应一个，包含 GUI 渲染线程、JS 引擎线程、事件线程等。
• GPU 进程：负责 3D 绘制。
• 第三方插件进程：处理跨域、广告拦截等。

浏览器输入网址流程

1. DNS 解析获取 IP。
2. 访问服务器软件。
3. 服务器返回数据。
4. 渲染进程处理：GUI 线程构建 DOM 树、CSS 规则树、渲染树并绘制；JS 引擎线程解析代码，异步任务交给其他线程。

JS 为什么是单线程

JS 主要用于操作 DOM 和用户交互。若多线程会导致 DOM 操作冲突（如同步问题）。HTML5 Web Worker 允许创建子线程，但不得操作 DOM，不改变 JS 单线程本质。

回流与重绘

• 回流 (Reflow)：页面布局流改变（如 width, height, border），触发重绘。
• 重绘 (Repaint)：元素样式改变但不影响布局（如 color, background）。
• 导致回流的属性：width, height, border, top 等。
• 导致重绘的属性：color, background, box-shadow 等。
• 如何避免：减少 DOM 操作，合并样式修改，使用 CSS3 硬件加速。

虚拟 DOM

通过 JS 对象描述真实 DOM，减少同一时间内的多处修改触发的 Reflow 和 Repaint 次数。

生命周期及应用场景

• created：异步请求（不可操作 DOM）。
• mounted：DOM 操作（swiper, echarts）、异步请求。
• updated：监控数据变化进一步 DOM 操作。
• unmounted (Vue3) / destroyed (Vue2)：清理资源（定时器）防止内存泄露。
• activated/deactivated：keep-alive 缓存组件。
• errorCaptured：错误捕获，优雅降级。

tips：created 中可通过 this.$nextTick() 操作 ref 元素。

Vue3 生命周期变更

• 选项式：destroyed 改为 unmounted。
• 组合式：增加 onRenderTracked, onRenderTriggered，created 改为 setup。

$nextTick 理解

• 理解：确保在下次 DOM 更新循环结束后执行延迟回调。
• 场景：对话框放二维码、获取焦点、点击事件后加载 DOM。
• 原理：Vue 异步更新队列，利用 Promise.then、MutationObserver、setImmediate 或 setTimeout 实现微任务/宏任务调度。

组件编程

组件概念与好处

• 概念：封装 HTML 代码，便于维护。
• 好处：相互调用，减少冗余，便于后期维护。

UI 组件库

• 作用：统一规范，减少冗余。
• 常见：Element UI (PC), View UI (PC), Vant (Mobile)。

Props 语法与限制

• 作用：父传子获取属性数据。
• 语法：支持类型检查、默认值、验证器。

$emit 语法与作用

• 作用：子传父通知交互（如按钮点击）。

单向数据流

数据由父组件传递给子组件，禁止子组件直接更改，需由父组件修改后重新传递。

data 为何写成函数

组件实例化时多次复用，函数返回新对象避免数据共享污染。

v-model 原理

• 简写：<组件名 v-model="num2">
• 底层：:model-value="num2" @update:model-value="data => num2=data"

组件通信方式

• 常用：Pinia/Vuex, Props/$emit, Slot。
• 概率：Ref 获取实例，Provide/Inject。
• 了解：EventBus。

路由 (Vue Router)

路由配置键

path, component, name, redirect, alias, children, meta 等。

路由模式

• Hash 模式：基于 location.hash，兼容性好，无需服务器配置。
• History 模式：基于 history.pushState，URL 美观，需服务器配置 fallback。
• Abstract 模式：服务端使用。

SPA 优缺点

• 优点：减少 HTTP 请求，用户体验好，动画流畅。
• 缺点：首屏加载慢，不利于 SEO。
• SEO 优化：使用 Nuxt.js (Vue) 或 Next.js (React) 进行 SSR。

参数种类与方式

• Query：路径携带，刷新不丢失。
• Params：name 携带，刷新可能丢失（取决于配置）。

导航守卫

• 全局前置：beforeEach（鉴权）。
• 路由独享：beforeEnter。
• 组件内：beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave。
• 执行顺序：离开守卫 -> 全局前置 -> 路由更新 -> 路由进入 -> 全局后置。

动态路由

• 场景：权限控制，菜单根据接口渲染。
• 实现：注释死路由，利用 addRoute 动态添加。

Meta 信息

存放面包屑、标识是否缓存组件等。

异步请求 (Axios/Fetch)

XHR vs Fetch

• 相同：异步请求。
• 不同：XHR 回调地狱，Fetch 基于 Promise。

Fetch vs Axios

• 相同：Promise。
• 不同：Fetch 官方标准，Axios 社区更强（拦截器、并发、取消等）。

Axios 封装

• 导出 request 实例（timeout, baseURL, headers）。
• 请求拦截器（Loading, Token）。
• 响应拦截器（关闭 Loading, 过滤数据，权限校验，Token 过期处理）。

跨域解决

• 前端代理 (http-proxy-middleware)。
• JSONP。
• 后端/CORS 配置。

HTTP 状态码

• 2xx：成功。
• 3xx：重定向。
• 4xx：客户端错误（401 未授权，403 禁止，404 不存在）。
• 5xx：服务器错误。

GET vs POST

• 安全：GET 参数在 URL，POST 在 Body。
• 长度：GET 受浏览器限制，POST 通常更大。

TypeScript 基础

any vs unknown

• any：任意类型，不安全。
• unknown：更安全，使用前需类型判断。

any vs void vs never

• any：任意类型。
• void：无返回值。
• never：永不存在的值（异常抛出或死循环）。

TS 新增数据类型

• 联合类型、元组、枚举、字面量类型、泛型等。

Interface vs Type

• Type：类型别名，可表示基本类型、对象、联合、交叉、泛型等。
• Interface：接口，主要用于描述对象结构，支持继承和实现。

泛型应用场景

• Vue ref/reactive, useAxios, API 结果定义，React useState/Component。

修饰符

• public：默认，自身、子类、外部可访问。
• protected：自身、子类可访问。
• private：仅自身可访问。
• readonly：只读属性。

TS 与 JS 区别

TS 是 JS 的超集，增加了静态类型系统，提升开发体验和代码健壮性。