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

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

谈谈对 v-memo 的理解

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

Vue2 和 Vue3 区别

• 框架层面：
  • Vue2 不贴近原生，封装较多；Vue3 定义变量即模型数据，去掉了过滤器、混入，通过 Hooks 实现组合式 API。
  • 构建工具从 Webpack 改为 Vite。
  • 状态管理从 Vuex 改为 Pinia。
• 语法层面：双向绑定、侦听器、生命周期、样式（:deep/:global）、新增 Teleport、Emit、Fragments、Composition API、SFC <script setup> 等。
• 底层原理：Vue2 使用 Object.defineProperty，Vue3 使用 Proxy。

MVVM 与 MVC 理解

• MVC：Model-View-Controller。后端常见模式，将程序划分为模型、视图、控制器，便于团队协作。
• MVVM：Model-View-ViewModel。前端常见模式，ViewModel 是 Model 和 View 的桥梁，数据自动绑定并渲染，视图变化通知 ViewModel 更新。
• 区别：
  • MVC 多为后端，单向通信；MVVM 多为前端，双向通信，无需手动操作 DOM。
  • Vue 设计受 MVVM 启发，但未完全遵循。

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

class 与 style 绑定的理解

• 目的：使用模型数据动态绑定 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 劫持模型数据变化。

• Proxy 拦截整个对象，可监听未定义属性，支持更多拦截方式（get/set 等 11 种），比 Object.defineProperty 更强。

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

计算属性的概念、好处、语法、场景

• 概念：减少视图操作，提升性能（有缓存）。
• 场景：一个数据依赖另一个数据计算（如购物车总价）、缓存、Vuex 等。

侦听器的概念、好处、语法、场景

• 概念：减少视图层操作，避免优先级问题。
• 场景：二维码切换登录、监控地址栏改变、百度搜索、日期筛选等。

watch 两大属性应用场景

• deep：深度监听对象变化（如 ElementUI 二次封装的 form 编辑）。
• immediate：首次打开立即执行（如面包屑显示对应菜单）。

watch 监控失效

针对对象类型数据，需加 deep 属性开启深度监听，或监听 "对象。键"。

计算属性和侦听器区别

• 计算属性：有缓存，响应式依赖缓存，调用不加小括号。
• 侦听器：无缓存，侦听模型数据变化，不能调用。

浏览器运行机制

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

浏览器输入网址干了啥

1. DNS 查询获取 IP。
2. 访问服务器软件。
3. 服务器返回数据。
4. 渲染进程处理：GUI 线程构建 DOM 树/CSS 规则树/渲染树；JS 引擎线程解析 JS 代码。

JS 为什么是单线程

JS 作为脚本语言，主要实现用户交互和 DOM 操作。多线程会导致复杂的同步问题（如两个线程同时修改 DOM）。为避免复杂性，JS 保持单线程本质。Web Worker 允许创建子线程，但不得操作 DOM。

JS 是单线程为何不存在执行效率问题

遇到耗时代码（如异步请求、事件），不会阻塞等待，而是交给其他线程处理后丢回执行栈，保证运行效率。

回流重绘的理解

• 回流/重排：页面布局流发生改变（如 width、height、border、top 等）。
• 重绘：元素自身样式改变但不影响布局流（如 color、background、box-shadow 等）。

导致回流、重绘的属性

• 回流：width、height、border、top 等。
• 重绘：color、background、box-shadow 等。

如何避免或减少回流重绘

• JavaScript 优化法：批量修改 DOM，避免频繁读写。
• CSS 优化法：使用 transform 代替 top/left，使用 opacity 代替 display 等。

虚拟 DOM 的理解

通过 JS 对象描述真实 DOM，减少同一时间内的多处内容修改所触发的浏览器 reflow 和 repaint 次数，优化性能。

Vue 有哪些生命周期及应用场景

• created：异步请求（不可操作 DOM）。
• mounted：DOM 操作（swiper、echarts、聊天默认滚底）。
• updated：监控数据变化进一步 DOM 操作（图表重置）。
• beforeDestroy/destroyed：清理非 Vue 资源（定时器）。
• activated/deactivated：keep-alive 缓存组件。
• errorCaptured：错误捕获，优雅降级。

Vue3 新增及弃用的生命周期

• 选项式：destroyed 改为 unMount，新增 renderTracked、renderTriggered。
• 组合式：onBeforeMount、onMounted 等，setup 替代 created。

created 里面可以操作 DOM 吗

通过 ref 不行，原生 JS 可以（不推荐）。非要通过 ref 操作，可使用 this.$nextTick()。

created 和 mounted 区别

• created 不可以 DOM 操作。
• mounted 可以 DOM 操作。

父子组件嵌套、生命周期执行顺序

挂载：父 created -> 子 created -> 子 mounted -> 父 mounted。

watch 与 created() 哪个先执行？

watch 中的 immediate 会让监听在初始值声明时执行，否则 created 先执行。

keep-alive 的理解及应用场景

• 理解：内置组件，将组件相关数据缓存到内存，避免重复挂载卸载开销。
• 场景：Tab 选项卡、详情页返回列表、排行榜等。

$nextTick 的理解及应用场景

• 理解：确保在下次 DOM 更新循环结束之后执行延迟回调，获取更新后的 DOM。
• 场景：对话框放登录二维码、获取焦点、点击事件修改状态后加载 DOM。
• 原理：Vue 异步更新 DOM，开启队列缓冲变更，下一个事件循环 tick 中刷新队列。底层尝试使用 Promise.then、MutationObserver、setImmediate 或 setTimeout。

Vue3 基础 - 选项式 API：组件编程

组件概念、好处、语法

• 概念：封装 HTML 代码，独立、可复用。
• 好处：相互调用，减少冗余，便于维护。

UI 组件库的理解、种类

• 是什么：提前封装好的公共组件。
• 能干嘛：统一规范、布局，减少冗余。
• 有哪些：Element UI、iView、Vant UI、Mint UI 等。

公共组件、页面组件的封装意义

• 公共组件：增加代码复用性。
• 逻辑/页面组件：增加代码可读性。

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。

Vue3 基础 - 组合式 API

ref、reactive 区别

• ref：定义基本类型或对象，取值需 .value。
• reactive：定义对象，解构后失去响应式。

watch 和 watchEffect 区别

• 核心：watch 懒执行，watchEffect 立即执行。
• 监控：watch 写谁监控谁，watchEffect 自动追踪函数内使用的模型数据。

Vue3 进阶 - 路由

路由的作用、配置键语法

• path：路径
• component：组件
• name：名称
• redirect：重定向
• alias：别名
• children：子路由
• meta：元信息

Vue 路由模式有几种？

• Hash 模式：基于 BOM location.hash，带 # 号，部署简单。
• History 模式：基于 BOM history.pushState，无 # 号，需服务器配置。
• Abstract 模式：服务端使用。

Vue 路由原理

• Hash：监听 window.onhashchange。
• History：监听 window.onpopstate。

History 有什么问题，如何解决？

• 问题：刷新无法加载网页。
• 解决：服务器配置 fallback_to_index_html。

Hash 和 History 区别

• Hash：有 # 号，部署无需配置。
• History：无 # 号，刷新丢失，需服务器配置。

SPA 优缺点及如何选择

• 优点：减少 HTTP 请求，体验好，动画方便。
• 缺点：首屏慢，不利于 SEO。
• 选择：需 SEO 优化则使用 SSR（如 Nuxt.js）。

参数种类、方式

• Query：path 传参，刷新不丢失。
• Params：name 传参，需定义冒号，刷新可能丢失（取决于配置）。

编程式导航的理解

利用 JS 跳转网页（router.push），区别于 a 标签声明式跳转。场景：登录、添加、删除按钮等。

嵌套路由 & 命名视图的场景

• 嵌套路由：父子关系，通过 children 定义，父组件 router-view 显示子组件。场景：后台管理系统两栏布局。
• 命名视图：兄弟关系，components 改为 components，router-view 加 name 属性。场景：移动端 NavBar、TabBar。

全局导航守卫登陆鉴权

• 作用：未登录不可访问特定页面。
• 语法：router.beforeEach((to, from, next) => { ... })。
• 白名单：登录页、404 页直接放行。

导航守卫种类及执行顺序

• 种类：全局前置（beforeEach）、全局后置（afterEach）、路由独享（beforeEnter）、组件内（beforeRouteLeave/Enter/Update）。
• 顺序：beforeRouteLeave -> beforeEach -> beforeRouteUpdate -> beforeEnter -> beforeRouteEnter -> beforeResolve -> afterEach。

动态路由实现

• 步骤：页面菜单根据接口数据渲染，路由不写死，利用 addRoutes/addRoute 动态添加规则。

元信息有啥用

存放面包屑、控制是否缓存组件（keep_alive）。

过渡特效场景

项目中用到，如 <transition> 包裹 router-view。

Vue3 进阶 - 异步请求

XHR、Fetch 区别

• 相同点：发送异步请求，ECMA 定义。
• 不同点：XHR 回调地狱，Fetch 基于 Promise。

Fetch、Axios 区别

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

Axios 封装

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

跨域如何解决

• 常用：前端代理（http-proxy-middleware）、JSONP、后端配置。
• Vue 配置：vue.config.js devServer 配置。

Axios 原理

基于 XMLHttpRequest 构造函数和 Node http 模块封装，动态判断环境返回 Promise。

HTTP 理解

超文本传输协议，规定客户端和服务端通信。包含请求行、响应行、头、体等。

状态码理解

• 2xx：成功（200, 201）。
• 3xx：重定向（301, 302, 304）。
• 4xx：客户端错误（400, 401, 403, 404）。
• 5xx：服务器错误（500）。

POST、GET 区别

• 安全：POST 对象安全，GET 地址栏可见。
• 数据：GET 受地址栏长度限制，POST 后端规定（通常更大）。

TypeScript

any、unknown 类型区别

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

any、void、never 区别

• any：任意类型。
• void：无类型，通常表示函数无返回值。
• never：永不存在的值，通常是抛出异常或永远不返回。

TS 新增数据类型

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

Interface、Type 区别

• Type：类型别名，可表示基本、对象、联合、元组、交叉、泛型等。
• Interface：接口，限于描述对象类型，支持 extends 继承。

TS 的泛型应用场景

Vue ref/reactive、useAxios、API Result 定义、React useState/Component/FC 等。

修饰符 public/protected/private/readonly

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

TypeScript 了解及好处

提供静态类型检查，增强代码健壮性和可维护性，适合大型项目。