Vue3 与 TypeScript 核心面试题实战解析

• Vue 2：created, mounted, updated, destroyed。
• Vue 3：
  • 选项式：created, mounted, updated, unmounted（替代 destroyed）。
  • 组合式：onMounted, onUpdated, onUnmounted 等。
  • 新增：beforeMount, beforeUpdate, beforeUnmount, activated, deactivated, errorCaptured。

其他差异

• 语法：Vue 3 去掉了过滤器、混入（Mixins），改用 Hooks 模式；支持 Composition API；构建工具由 Webpack 转向 Vite；状态管理 Vuex 演变为 Pinia。
• 组件通信：单向数据流原则不变，父传子用 props，子传父用 $emit。

组件编程与通信

Props 与 Emit

• Props：接收父组件传递的数据，支持类型验证和默认值。
• Emit：组件内部触发事件通知父组件，Vue 3 中推荐使用 defineEmits。

v-model 原理

• 本质是 :model-value 和 @update:model-value 的语法糖。
• 支持多个 v-model 时，可通过参数指定 prop 名称。

组件通信方式

1. 父子：props / emit
2. 跨级：provide / inject
3. 兄弟/任意：EventBus (Vue 3 需引入 mitt) / Pinia / Vuex
4. 实例引用：ref / $parent / $children

组合式 API (Composition API)

ref vs reactive

• ref：用于基本类型，也可用于对象。访问时需 .value。
• reactive：仅用于对象，返回的是代理对象，无需 .value。

watch vs watchEffect

• watch：懒执行，需指定监听源，可获取旧值和新值。
• watchEffect：立即执行，自动追踪依赖，无回调参数。

路由机制 (Vue Router)

模式选择

• Hash 模式：URL 带 #，兼容性好，无需服务器配置。
• History 模式：URL 美观，但刷新需服务器配置 fallback 路径。

导航守卫

• 全局前置：router.beforeEach，常用于鉴权。
• 路由独享：beforeEnter。
• 组件内：beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave。

动态路由与权限

• 根据后端接口返回的菜单权限，动态调用 addRoute 添加路由规则。
• 利用 meta 字段存储面包屑、缓存标识等信息。

网络请求 (Axios)

XHR vs Fetch vs Axios

• XHR：回调地狱，不推荐。
• Fetch：Promise 风格，官方标准，但错误处理较弱。
• Axios：社区维护，功能强大，支持拦截器、取消请求、JSON 转换。

封装建议

• 创建 axios 实例，配置 baseURL、timeout。
• 请求拦截器：统一添加 token、loading 状态。
• 响应拦截器：统一处理错误码、数据解包、token 过期处理。

跨域解决方案

• 开发环境：vue.config.js 配置 devServer.proxy。
• 生产环境：Nginx 反向代理或后端 CORS 配置。

TypeScript 基础

类型系统

• any：任意类型，失去类型检查。
• unknown：更安全，使用前需类型收窄。
• never：永不存在的类型，通常用于抛出异常或死循环。
• void：无返回值。

Interface vs Type

• Interface：描述对象结构，支持继承和合并。
• Type：更灵活，可表示联合类型、元组、泛型约束等。

泛型应用

• 在 ref, reactive, axios 请求封装中广泛使用，确保类型安全。

修饰符

• public/protected/private：控制类成员访问权限。
• readonly：只读属性。

浏览器运行机制

进程与线程

• 浏览器是多进程的，每个 Tab 对应一个渲染进程。
• JS 是单线程的，基于执行栈，通过事件循环处理异步任务。

回流与重绘

• 回流 (Reflow)：布局改变，如宽高变化，代价高。
• 重绘 (Repaint)：样式改变但不影响布局，如颜色变化。
• 优化：批量修改 DOM，避免频繁读写样式，使用 transform 代替 top/left。

总结

本文梳理了 Vue3 与 TypeScript 面试中的高频考点，涵盖响应式原理、生命周期、组件通信、路由机制及类型系统。掌握这些核心概念，结合实战项目经验，能有效应对前端技术面试。