Vue3 与 TypeScript 核心面试题解析

MVVM 与 MVC 模式

• MVC：Model-View-Controller。后端常见，单向通信，V 和 M 耦合度较高。
• MVVM：Model-View-ViewModel。前端主流，双向绑定。ViewModel 作为桥梁，自动同步数据变化，减少了大量手动 DOM 操作。

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

选项式 API 详解

Class 与 Style 绑定

• 目的：利用模型数据动态控制样式，减少 DOM 操作。
• 语法：
  • :class="dataKey"
  • :class="{ className: boolean }"
  • :class="[array]"
  • :style="{ cssProp: value }"
• 场景：Tab 切换、菜单高亮、文章字体调整。

自定义指令

• 作用：封装 DOM 操作，提高复用性。
• 场景：全屏、拖拽、水印、登录按钮鉴权。

双向绑定 v-model 原理

本质是 :value 和 @input 的语法糖。在 Vue 3 组件中，默认 prop 名为 modelValue，事件名为 update:modelValue。

响应式原理对比

• Vue 2：Object.defineProperty 劫持属性。存在失效场景（对象新增属性、数组索引修改），需配合 $set 或 $forceUpdate。
• Vue 3：Proxy 代理整个对象。支持监听未定义属性，深度嵌套自动代理，性能更优。

计算属性与侦听器

• 计算属性 (computed)：有缓存机制，依赖项不变则不重新计算。适用于数据依赖计算（如购物车总价）。
• 侦听器 (watch)：无缓存，监听数据变化执行副作用。适用于异步请求、监控地址栏改变等。
• Watch 两大属性：
  • deep：深度监听对象变化。
  • immediate：立即执行一次回调。

浏览器运行机制

• 进程：主进程（管理标签页）、渲染进程（每个标签页独立）、GPU 进程、插件进程。
• 线程：GUI 渲染线程（布局绘制）、JS 引擎线程（执行脚本）、事件线程等。
• 单线程原因：JS 主要用于操作 DOM，多线程会导致复杂的同步问题（如两个线程同时修改同一 DOM）。Web Worker 允许创建子线程，但不能操作 DOM。
• 回流与重绘：
  • 回流 (Reflow)：布局改变（宽高、位置等），触发重绘。
  • 重绘 (Repaint)：样式改变但不影响布局（颜色、背景）。
  • 优化：减少 DOM 操作，合并读写，使用 CSS transform 代替 top/left。

虚拟 DOM 与生命周期

• 虚拟 DOM：用 JS 对象描述真实 DOM，批量更新以减少浏览器 Reflow/Repaint 次数。
• 生命周期：
  • created：数据初始化完成，不可操作 DOM。
  • mounted：DOM 挂载完成，可操作 DOM（如 Echarts 初始化）。
  • updated：数据更新后，DOM 已更新。
  • unmounted：组件销毁，清理定时器等资源。
  • activated/deactivated：keep-alive 缓存组件的激活/停用。
• 父子组件顺序：父 created -> 子 created -> 子 mounted -> 父 mounted。
• $nextTick：确保在下次 DOM 更新循环结束后执行回调。原理是利用微任务队列（Promise/MutationObserver）缓冲更新。

组件编程

• Props：父传子，单向数据流。禁止子组件直接修改 props。
• Emit：子传父，通知父组件交互。
• 插槽 (Slot)：内容分发，增强组件灵活性。
• 通信方式：Props/Emit、Pinia/Vuex、Provide/Inject、EventBus（Vue 3 移除）、Ref/Parent 获取。

组合式 API (Composition API)

• ref vs reactive：
  • ref：包装基本类型或对象，访问需 .value。
  • reactive：包装对象，直接访问属性。
• watch vs watchEffect：
  • watch：懒执行，指定监听源。
  • watchEffect：立即执行，自动追踪依赖。

路由 (Vue Router)

• 模式：Hash 模式（带 #，兼容性好）、History 模式（无 #，需服务器配置）、Abstract（服务端）。
• 原理：Hash 基于 location.hash 监听；History 基于 history.pushState。
• 导航守卫：
  • 全局前置 beforeEach：权限校验。
  • 路由独享 beforeEnter。
  • 组件内 beforeRouteEnter/Update/Leave。
• 动态路由：根据用户权限动态添加路由规则，实现菜单权限控制。

Axios 与 HTTP

• XHR vs Fetch：Fetch 基于 Promise，更现代。
• Axios：基于 Promise，支持拦截器、取消请求、自动转换 JSON。
• 跨域解决：前端代理（devServer）、后端 CORS 配置、JSONP（GET）。
• HTTP 状态码：2xx 成功，3xx 重定向，4xx 客户端错误，5xx 服务端错误。
• GET vs POST：GET 参数在 URL，不安全；POST 在 Body，更安全，适合提交敏感数据。

TypeScript 进阶

• Any vs Unknown：Unknown 更安全，使用前需类型检查；Any 可跳过检查。
• Type vs Interface：
  • type：类型别名，支持联合、交叉、字面量等复杂类型。
  • interface：接口，主要用于描述对象结构，支持继承和扩展。
• 泛型应用：Vue ref/reactive、API 响应数据封装、React useState 等。
• 修饰符：public（默认）、private（类外不可见）、protected（子类可见）、readonly（只读）。

以上内容基于实际项目经验整理，旨在帮助开发者深入理解核心机制。