微信小程序前端面经

一、技术栈与编码能力(10min)

1. Vue 3 & Composition API

Q1:请解释一下 refreactive 的区别?你在项目中是如何使用的?

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

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

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

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

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

**答:**vue2使用Object.defineProperty实现响应式,只能拦截对象已有属性的变化

Vue3使用proxy+Reflect实现响应式,可以监听新增/删除属性、数组变化等

2. TypeScript

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

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

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

Q5:如何处理接口返回数据的类型定义?有没有用到泛型?

答:

通常将接口模型放在 /types/ 下,按模块划分目录结构(如 /types/pool, /types/school)。

使用 interface 定义对象结构,方便扩展和继承。

使用 type 定义联合类型、交叉类型、泛型等复杂结构。

复制代码
  interface School {
    id: number;
    name: string;
  }

  type QuestionType = 'single' | 'multiple';

3. 组件通信与复用

Q6:举个例子说明你使用过 provide/injectPinia/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 支持。
    • 性能更优,体积更小。

三、性能与调试(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 };
}
相关推荐
晓得迷路了几秒前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆7 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆12 分钟前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan15 分钟前
Web开发系列-第0章 Web介绍
前端
老华带你飞20 分钟前
口腔助手|口腔挂号预约小程序|基于微信小程序的口腔门诊预约系统的设计与实现(源码+数据库+文档)
java·数据库·微信小程序·小程序·论文·毕设·口腔小程序
尸僵打怪兽24 分钟前
HBuilder X打包发布微信小程序
微信小程序·小程序·打包·hbuilder x
小鱼人爱编程24 分钟前
Java基石--反射让你直捣黄龙
前端·spring boot·后端
JosieBook2 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug
LBJ辉2 小时前
2. Webpack 高级配置
前端·javascript·webpack
灵感__idea8 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员