一、技术栈与编码能力（10min）

1. Vue 3 & Composition API

Q1：请解释一下 ref 和 reactive 的区别？你在项目中是如何使用的？

答：ref是包装一个原始值或对象，通过.value访问，reactive是对对象的深度响应式处理，不能用于原始值。 在模板中使用，ref会自动解包，不需要写.value，而reactive直接访问属性即可。

加分点：toRefs的作用及如何在组合函数中使用它。提到<script setup>中自动解包机制。

toRefs是Vue3组合式API中的一个工具函数。当解构reactive创建的响应式对象时，直接解构会失去响应式，toRefs可解决这个问题。toRefs用于将响应式对象的每个属性转换为独立的ref,保持属性的响应式并避免解构时丢失响应式。toRefs转换后的属性是ref。需通过.value访问值，toRefs只能处理reactive创建的对象。

组合函数返回的状态：return toRefs(reactiveObj)

Q2：<script setup> 和传统 <script> 有什么不同？它的优势和局限是什么？

答：<script setup>是vue3的语法糖，简化了组合式API的使用，优势是不需要显式的setup()函数，默认导出变量为组件的公开API ,自动引入defineProps、defineEmits等编译器宏。不利于代码复用（可结合自定义的Hook解决）

Q3：Vue 3 中的响应式原理和 Vue 2 有何不同？

答：vue2使用Object.defineProperty实现响应式，只能拦截对象已有属性的变化，无法检测新增、删除属性。通过data（）函数返回对象，无法单独暴露响应式对象，必须依赖组件实例，通过this访问。不支持Map、Set等ES6集合类型 vue2中的map不是响应式的

Vue3用Proxy代理整个对象，动态拦截所有操作（包括新增、删除属性，数组索引修改），支持深层响应式。使用ref和reactive创建独立响应式变量，可将响应式状态和逻辑提取到组合函数中。map是响应式的，需用ref和reactive包裹进行显示转换（const map = reactive(new Map()）

功能	Vue 2	Vue 3
创建响应式对象	data() + Vue.observable()	reactive() / ref()
新增响应式属性	Vue.set()	直接赋值（Proxy 自动支持）
删除响应式属性	Vue.delete()	直接 delete
数组响应式	重写方法（如 push）	原生支持索引修改
响应式工具	无	toRefs、toRef、isReactive

2. TypeScript

Q4：你是如何组织 /types/ 下的类型的？有使用过 type 还是 interface？为什么？

答：通常将接口模型放在/types下，按模块分目录结构

使用interface定义对象结构，方便扩展和继承，使用type定义联合类型，交叉类型、泛型等复杂结构

泛型：用类型变量（如<T>）表示动态类型，T由调用时决定。

联合类型：允许一个变量或参数同时支持多种类型，通过 | 符号连接，扩展类型的灵活性。

交叉类型：用 & 符号将多个类型合并为一个包含所有成员的新类型，“与”的关系，一个值满足多个类型的约束。

• 3. 组件通信与复用

Q5：举个例子说明你使用过 provide/inject 或 Pinia/Vuex 的场景。

provide/inject：用于跨层级传递主题配置、语言设置等上下文信息。

// 父组件
provide('theme', 'dark');

// 子组件
inject('theme');

Pinia：用于全局状态管理，如用户登录状态、收藏学校列表。

const userStore = useUserStore();
userStore.login();

二、项目架构与工程实践（10min）

4. 模块划分与组织结构

Q7：请介绍一下项目的整体结构（如 /pages, /components, /stores, /types 等目录的作用）。

答：

• /pages：页面级组件，对应路由。
• /components：通用组件库，如按钮、标签、导航栏等。
• /stores：状态管理模块，使用 Pinia。
• /types：类型定义文件，按模块划分。
• /common：公共工具类和网络请求封装。

5. 接口调用与网络层设计

Q8：你是如何封装网络请求模块的？是否统一处理了错误、拦截器、Token 刷新？

• 使用 Axios 或 UniApp 原生 uni.request 封装了一个统一的 http.ts。
• 添加了请求拦截器（添加 Token）、响应拦截器（统一错误提示）。
• 错误码集中处理（如 401 登录失效跳转登录页）。
• Token 刷新机制（如使用 refresh token）。

6. 状态管理

Q9：项目中使用的是 Pinia 吗？为什么选择它而不是 Vuex？

• 优点：
  • 更简洁的 API，无需 mutations。
  • 支持模块化、命名空间。
  • 更好的 TypeScript 支持。
  • 性能更优，体积更小。

Vuex需要定义mutation/actions/getters，基于Vue2的响应式系统

Pinia直接使用Composition API风格，无需mutations,直接通过actions修改状态，基于Vue3的响应式系统（Proxy实现），按需加载store ，仅支持Vue3

三、性能与调试（5min）

7. 性能优化

Q10：你是如何做页面加载优化的？比如懒加载、骨架屏、分包等。

• 使用 Vue 的异步组件实现懒加载。
• 页面首屏采用骨架屏减少白屏时间。
• 使用 uni.preloadPages 实现页面预加载。
• 对大型功能模块进行分包（subpackages）。
• 图片懒加载、CDN 加速。

四、协作与测试（5min）

8. Git 协作流程

Q11：团队中是如何进行 Git 分支管理的？有使用 PR 流程吗？

答：有一个主分支develop ，再每个人建立自己的功能分支，开发完成后提交pr，合并，处理冲突

Q12：有没有使用过自定义 Hook 来封装逻辑复用？

答:有，在多个组件中复用筛选、排序、搜索等功能，使用自定义的Hook.

function useFilter(list) {
  const filteredList = computed(() => filterLogic(list.value));
  return { filteredList };
}

Hook（钩子）是编程中的一种拦截或扩展程序执行的流程技术，允许开发者在特定阶段插入自定义的代码，不同场景Hook的实现和用途不同