Vue3 与 TypeScript 核心面试考点梳理

自定义指令

用于封装 DOM 操作，提高复用性。常见场景包括全屏、拖拽、水印、权限鉴权等。

响应式系统与 Composition API

Vue 2 vs Vue 3 响应式原理

• Vue 2：基于 Object.defineProperty 劫持属性 getter/setter。无法监听对象新增属性或数组索引修改，需使用 $set 或 $forceUpdate。
• Vue 3：基于 Proxy 拦截整个对象。可监听未定义属性，支持 11 种拦截器，性能更强，原生支持 Map/Set。

ref 与 reactive 区别

• ref：定义基本类型或对象，访问时需 .value。内部自动包装为 Proxy。
• reactive：仅用于定义对象类型，解包后直接访问属性。
• 选择：推荐优先使用 ref，除非明确需要响应式对象且不需要解包。

watch 与 watchEffect

• watch：懒执行，指定监听源，适合异步操作或复杂逻辑。
• watchEffect：立即执行，自动收集依赖，类似计算属性的副作用版。

计算属性 vs 侦听器

• 计算属性：有缓存，依赖变化才重新计算，适合数据转换（如购物车总价）。
• 侦听器：无缓存，监听数据变化执行副作用（如发送请求、日志记录）。

生命周期与性能优化

生命周期钩子

• created：实例创建完成，数据观测已完成，但 DOM 未挂载。不可操作 DOM。
• mounted：DOM 挂载完成，可进行 DOM 操作、初始化第三方库（如 ECharts）。
• updated：数据变更导致视图更新后调用。
• beforeUnmount / unmounted：组件卸载前/后。
• activated / deactivated：keep-alive 缓存组件的激活/停活。
• 父子组件顺序：父 created -> 子 created -> 子 mounted -> 父 mounted。

$nextTick 机制

Vue 更新 DOM 是异步的。$nextTick 确保在下次 DOM 更新循环结束后执行回调。常用于修改数据后立即获取更新后的 DOM。

原理：利用微任务（Promise.then, MutationObserver）或宏任务（setTimeout）将回调放入队列，在事件循环中统一执行。

回流与重绘

• 回流 (Reflow)：布局或几何尺寸改变触发（如 width, height）。代价高。
• 重绘 (Repaint)：样式改变但不影响布局（如 color, background）。代价较低。
• 优化：批量修改样式、使用 transform 代替 top/left、避免频繁读取布局属性。

虚拟 DOM

通过 JS 对象描述真实 DOM，通过 Diff 算法最小化 DOM 操作次数，减少回流重绘。

组件通信与编程

组件概念

独立、可复用的代码块，便于维护。分为公共组件（复用性强）和页面组件（业务逻辑强）。

Props 与 Emit

• Props：父传子。支持类型校验、必填验证、默认值。
• Emit：子传父。通知父组件交互结果。

单向数据流

数据由父流向子，禁止子组件直接修改 props。若需修改，应通知父组件更新后重新传递。

data 为何是函数

组件实例共享同一份 data 对象，定义为函数可返回新对象，避免多个实例间数据污染。

插槽 (Slot)

用于透传内容，实现组件布局的灵活性。

状态管理

• Pinia/Vuex：全局状态管理。
• Provide/Inject：祖先组件向后代注入数据。
• Ref/Parent：直接获取组件实例（不推荐滥用）。

路由 (Vue Router)

模式选择

• Hash 模式：URL 带 #，兼容性好，无需服务器配置。
• History 模式：URL 美观，刷新需服务器配置 fallback 至 index.html。

导航守卫

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

动态路由

根据用户权限动态添加路由规则（addRoute），实现菜单权限控制。

参数传递

• Query：router.push({query: {id: 1}})，刷新不丢失。
• Params：router.push({name: 'user', params: {id: 1}})，需在路由定义时加冒号，刷新可能丢失（取决于配置）。

网络请求 (Axios)

XHR vs Fetch vs Axios

• XHR：回调地狱，旧标准。
• Fetch：基于 Promise，官方标准，错误处理需手动判断 status。
• Axios：基于 Promise，功能强大（拦截器、取消请求、自动转换 JSON），社区广泛。

跨域解决

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

HTTP 状态码

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

TypeScript 基础

类型系统

• any：任意类型，失去类型检查保护。
• unknown：更安全，使用前需进行类型收窄。
• void：无返回值。
• never：永不存在的值（如抛出异常）。

Interface vs Type

• Interface：描述对象结构，支持继承、合并声明。
• Type：类型别名，支持联合、交叉、泛型，更灵活。

泛型应用

常用于 Vue ref<T>, axios<T>, React hooks 等，确保数据结构的一致性。

修饰符

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