当前位置：首页 > news >正文

3.28前端模拟面试

news 来源：原创 2025/7/5 6:32:11

针对你 1.5 年的前端经验，结合 Vue 3、TypeScript、微前端（qiankun）等背景，我准备了一套模拟面试题，偏向场景化问题，考察你的实战经验和思维能力。

一、工程化 & 架构

你们的前端项目使用 qiankun 做微前端，但有子应用加载很慢，该如何优化？

考察点：微前端性能优化、懒加载、资源预加载等

你负责的 Vue 3 项目需要引入 Ant Design 组件库，但业务场景只用到少部分组件，你如何优化打包大小？

考察点：按需加载、tree shaking、unplugin-vue-components

团队发现目前的业务代码复用度不高，你如何设计一个可复用的业务组件库？

考察点：组件封装、dumi 文档管理、npm 发布等

二、Vue 3 & 组件通信

在 Vue 3 里，你要在 setup 之外的地方访问 ref 或 computed，该如何处理？

考察点：toRef、toRaw、getCurrentInstance、Pinia

你有一个 Vue 组件 A，B 组件是它的子组件，要求 A 组件能在不刷新页面的情况下实时监听 B 组件的某个数据变化，你会如何实现？

考察点：defineModel、watch、provide/inject、事件总线

在 Vue 3 组合式 API 中，你如何在子组件 onUnmounted 时，通知父组件进行某些操作？

考察点：onUnmounted、emit、expose、事件总线

三、前端性能优化

你在分析一个 Vue 3 页面，发现某个 computed 执行次数过多，如何优化？

考察点：依赖收集、shallowRef、triggerRef

你在一个复杂表单里发现输入有明显卡顿，该如何排查并优化？

考察点：防抖、节流、v-model.lazy、vueuse 的 useDebounceFn

你的团队希望对 Vue 3 项目进行骨架屏优化，该如何实现？

考察点：骨架屏组件封装、suspense、IntersectionObserver 预加载

四、微前端 & 跨应用通信

你在 qiankun 里如何实现主应用和子应用的跨应用状态同步？

考察点：props 传递、qiankun 的全局状态、localStorage/sessionStorage

微前端子应用 A 需要跳转到子应用 B 的某个页面，但要求 URL 结构保持一致，如何实现？

考察点：qiankun 的路由同步、activeRule 机制、history.pushState

五、综合场景

你的 Vue 3 项目在用户访问某个页面时，白屏时间过长，你如何排查并优化？

考察点：懒加载、骨架屏、路由异步组件、performance API 监控

你在 Vue 3 组件里用了 watchEffect 监听某个变量，但发现它执行了不必要的副作用，如何优化？

考察点：watch vs watchEffect、flush 选项

你们的前端项目需要支持动态权限控制，不同用户访问同一页面展示不同内容，如何设计？

考察点：路由权限、组件权限、前后端协作

answer:

下面是所有问题的详细回答，包括思路分析、代码示例和优化建议。

一、工程化 & 架构

你们的前端项目使用 qiankun 做微前端，但有子应用加载很慢，该如何优化？

分析：
子应用加载慢可能由多个因素导致，如资源体积过大、网络请求过多、首屏渲染慢等，优化可以从以下几个方面入手：

减少子应用打包体积

采用按需加载（import()）

组件库 Tree Shaking（如 Ant Design Vue 用 unplugin-vue-components）

使用 gzip 或 brotli 压缩

通过 CDN 加载第三方库（externals 配置）

优化子应用的资源加载

开启 HTTP/2

预加载核心资源（）

缓存优化（使用 service worker / cache-control）

优化首屏渲染

Skeleton 骨架屏

异步数据请求

路由懒加载

子应用内 SSR（如 Nuxt / Vite SSR）

使用 qiankun 预加载机制

prefetch 机制提前加载：

registerMicroApps(apps, {
prefetch: true, // 预加载
});

手动预加载：

import { loadMicroApp } from ‘qiankun’;

const microApp = loadMicroApp({
name: ‘child-app’,
entry: ‘http://child-app.com’,
container: ‘#child-container’
});

你负责的 Vue 3 项目需要引入 Ant Design 组件库，但业务场景只用到少部分组件，你如何优化打包大小？

解决方案：

使用 unplugin-vue-components 自动按需导入：

import Components from ‘unplugin-vue-components/vite’;
import { AntDesignVueResolver } from ‘unplugin-vue-components/resolvers’;

export default defineConfig({
plugins: [
Components({
resolvers: [AntDesignVueResolver()], // 自动引入
}),
],
});

避免全量引入

import { Button } from ‘ant-design-vue’;
app.use(Button);

使用 ES 模块方式导入

import ‘ant-design-vue/es/button/style/css’;

你如何设计一个可复用的业务组件库？

关键点：

封装通用组件

使用 dumi 生成文档

打包并发布至 npm

步骤：

封装组件

使用 dumi 生成组件文档

npm install dumi -D

使用 Rollup/Vite 打包

npm publish

二、Vue 3 & 组件通信

在 Vue 3 里，你要在 setup 之外的地方访问 ref 或 computed，该如何处理？

方法 1：使用 getCurrentInstance

import { getCurrentInstance } from ‘vue’;

const instance = getCurrentInstance();
console.log(instance.proxy.someRef);

方法 2：使用 toRef 和 toRaw

const state = reactive({ count: 0 });
const countRef = toRef(state, ‘count’);

组件 A 监听 B 组件的数据变化

方法 1：defineModel

方法 2：watch 监听 Props

watch(() => props.value, (newVal) => { console.log(newVal); });

方法 3：provide/inject

provide(‘key’, value);
const injectedValue = inject(‘key’);

在 Vue 3 组件 onUnmounted 时通知父组件

方法：emit 事件

三、前端性能优化

computed 执行次数过多

优化方案：

使用 shallowRef

const state = shallowRef({ value: 1 });

使用 triggerRef 手动触发更新

triggerRef(state);

复杂表单输入卡顿

优化方案：

使用 v-model.lazy

防抖

import { useDebounceFn } from ‘@vueuse/core’;
const updateValue = useDebounceFn((val) => console.log(val), 300);

骨架屏

方案：

四、微前端 & 跨应用通信

qiankun 主应用与子应用状态同步

方法 1：使用 props

registerMicroApps([{ props: { globalState } }]);

方法 2：使用 qiankun 的 initGlobalState

const actions = initGlobalState({ user: ‘admin’ });
actions.setGlobalState({ user: ‘guest’ });

微前端子应用 A 跳转子应用 B，URL 保持一致

history.pushState({}, ‘’, ‘/sub-app-b’);

五、综合场景

Vue 3 页面白屏时间长，如何优化？

优化方案：

路由懒加载

const Component = defineAsyncComponent(() => import(’./Component.vue’));

骨架屏
异步数据处理

watchEffect 监听不必要的副作用

优化方案：

watch(() => props.value, (newVal) => { console.log(newVal); });

动态权限控制

方法：

const userPermissions = ref([‘view_dashboard’]);
const hasPermission = computed(() => userPermissions.value.includes(‘view_dashboard’));

Dashboard

3.28前端模拟面试

针对你 1.5 年的前端经验，结合 Vue 3、TypeScript、微前端（qiankun）等背景，我准备了一套模拟面试题，偏向场景化问题，考察你的实战经验和思维能力。一、工程化 & 架构你们的前端项目使用 qiankun 做微…...

编程日记 2025/7/5 6:32:11

pip 安装某个包之后，Jupyter Lab仍旧显示包冲突；例如：Numba needs NumPy 2.1 or less. Got NumPy 2.2.

异常提示 Numba needs NumPy 2.1 or less. Got NumPy 2.2. --------------------------------------------------------------------------- ImportError Traceback (most recent call last) Cell In[8], line 53 import pywt4 import matplot…...

编程日记 2025/7/1 14:55:50

Python：爬虫概念与分类

网络请求： https://www.baidu.com url——统一资源定位符请求过程： 客户端，指web浏览器向服务器发送请求请求：请求网址(request url)；请求方法(request methods)；请求头(request header)&…...

编程日记 2025/7/5 5:13:16

flask开发中设置Flask SQLAlchemy 的 db.Column 只存储非负整数（即 0 或正整数）

如果你想控制一个 Flask SQLAlchemy 的 db.Column 只存储非负整数（即 0 或正整数），你可以在模型中使用验证来确保这一点。一种常见的方法是使用模型的 validate 方法或者在执行插入或更新操作时进行检查。以下是实现这一目标的几种方法&…...

编程日记 2025/7/5 4:05:11

从0到1解决项目问题经验-Vue3前端

问题1： 我有文件里面这么一段代码，但是现在有个问题，就是在设备信息详情的抽屉页面中，当我首次点击查看的时候，显示的物流中心名称现在是跟"deviceInfo.logisticsCenterName"做的绑定，于是现在显…...

编程日记 2025/6/28 1:29:54

Vue.js的CSS过渡与动画：常用案例解析

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》 🍚 蓝桥云课签约作者、…...

编程日记 2025/6/28 1:31:20

【论文阅读】Co2l: Contrastive continual learning

原文链接：[2106.14413] Co$^2$L: Contrastive Continual Learning 阅读本文前，需要对持续学习的基本概念以及面临的问题有大致了解，可参考综述： Wang L, Zhang X, Su H, et al. A comprehensive survey of continual learning: …...

编程日记 2025/7/3 17:55:23

Python给对象数组排序

文章目录 1. 使用sorted()函数（返回新的排序后的列表）2. 使用list.sort()方法（原地排序，不返回新列表）3. 如果数据结构是集合（set），集合本身是无序的，无法直接排序&#…...

编程日记 2025/6/28 7:12:53

Docker-清理容器空间prune

docker system prune -a 是一个非常有用的命令，用于清理 Docker 系统中未使用的资源，包括停止的容器、未使用的网络、卷以及未被任何容器引用的镜像（悬空镜像和所有未使用的镜像）。以下是关于该命令的详细说明： 命令…...

编程日记 2025/6/28 1:26:44

Kubernetes》》K8S》》Deployment 、Pod、Rs 、部署 nginx

Deployment deployment文档说明 kubectl get rs,deployment,pods 删除pod 、deployment 、service # 如果只删除pod，deployment会自动重建，所以应该先删除deployment。 # 下面演示的是删除所有deployment，可以指定只删除某个 # 删除所有…...

编程日记 2025/7/5 5:38:16

【Zookeeper搭建】Zookeeper分布式集群搭建完整指南

Zookeeper分布式集群搭建 （一）克隆前准备工作一、时钟同步步骤： 1、输入date命令可以查看当前系统时间，可以看到此时系统时间为PDT（部分机器或许为EST），并非中国标准时间。我们在中国地区…...

编程日记 2025/7/3 17:55:34

基于YOLO11/WVP的电梯系统开发-模型训练与rk3568移植

1. 环境准备代码下载： https://github.com/ultralytics/ultralytics.git切换到 8.3.0 以上的分支，yolov11 只在上述分支支持, 下载后在 ultralytics 根目录下安装 yolo 依赖环境： pip install -e . -i https://pypi.tuna.tsinghua.edu.cn…...

编程日记 2025/7/2 12:34:21

[数据结构]并查集(系统整理版)

基础用法 int p[N];//路径压缩寻找祖宗节点 int find(int x){if(p[x]!x) p[x]find(p[x]);return p[x]; }int main(){ //初始化for(int i1;i<n;i) p[i]i; }合并 void merge(int a,int b){int aafind(a),bbfind(bb);if(aa!bb){p[aa]bb;} }查询是否联通 bool is_connected(…...

编程日记 2025/7/3 10:51:29

人工智能与软件工程结合的发展趋势

AI与软件工程的结合正在深刻改变软件开发的流程、工具和方法，其发展方向涵盖了从代码生成到系统维护的整个生命周期。以下是主要的发展方向和技术趋势： 1. 软件架构体系的重构从“面向过程”到“面向目标”的架构转型： AI驱动软件设计以目标…...

编程日记 2025/7/2 7:40:06

Compose 实践与探索十七 —— 多指手势与自定义触摸反馈

上一节我们讲了滑动的手势识别以及嵌套滑动，二者都属于触摸反馈这个大的范畴内的知识。本节我们将深入触摸反馈这个话题，讲一讲多指手势的识别与完全自定义的触摸反馈的实现。 1、多指手势多指手势可以分为两类： 利用 API 处理预设好的手…...

编程日记 2025/7/2 4:01:36

哈希表 - 两个数组的交集(集合、数组) - JS

一、Set基础在 JavaScript 中，Set 是一种集合（Collection）数据结构，用于存储唯一值（不允许重复），并且可以高效地进行添加、删除、查询等操作。它类似于数组（Array）…...

编程日记 2025/6/30 12:20:23

26_ajax

目录了解接口前后端交互一、安装服务器环境 nodejs ajax发起请求渲染响应结果 get方式传递参数 post方式传递参数封装ajax_上封装ajax下了解清楚前后端交互就可以写一些后端代码了。小项目现在写项目开发的时候都是前后端分离之前都没有前端这个东西&a…...

编程日记 2025/6/28 5:56:58

Java面试黄金宝典24

1. 什么是跳表定义跳表（Skip List）是一种随机化的数据结构，它基于有序链表发展而来，通过在每个节点中维护多个指向其他节点的指针，以多层链表的形式组织数据。其核心思想是在链表基础上增加额外层次，每…...

编程日记 2025/6/27 5:55:09

每日c/c++题备战蓝桥杯（全排列问题）

题目描述按照字典序输出自然数 1 到 n 所有不重复的排列，即 n 的全排列，要求所产生的任一数字序列中不允许出现重复的数字。输入格式一个整数 n。输出格式由 1∼n 组成的所有不重复的数字序列，每行一个序列。每个数字保留 5 个场…...

编程日记 2025/7/4 14:35:00

Layui实现table动态添加行，可删除、表格可编辑，小数校验

实现如图需求，layui实现的可编辑table，包含B、C、D、E列，A列不用实现出现，A列放在附件就是让你明白，不同的物料名称，行是不一样的。除了头部表头和E列不能编辑，每个表格都可编辑，其中…...

编程日记 2025/7/3 4:25:10

Spring Boot 非web应用程序

在 Spring Boot 框架中，要创建一个非Web应用程序（纯Java程序） main方法运行，不启动tomcat，main方法执行结束，程序就退出了； 方式一 1、SpringBoot开发纯Java程序，应该采…...

编程日记 2025/7/1 18:15:59

数据分析中的基线校正算法全解析：原理、实现与应用

数据分析中的基线校正算法全解析：原理、实现与应用在数据分析中，基线漂移是一个常见问题，会严重影响数据的解释和分析精度。本文将详细介绍12种主流基线校正方法，包括数学原理、Python实现代码和适用场景分析。基线漂移问题概述基线漂移主要由以下因素引起：仪器强度…...

编程日记 2025/6/30 12:20:23

国外计算机证书推荐（考证）（6 Sigma、AWS、APICS、IIA、Microsoft、Oracle、PMI、Red Hat）

文章目录证书推荐1. 六西格玛 (6 Sigma)2. 亚马逊网络服务 (AWS)3. 美国生产与库存控制学会 (APICS)4. 内部审计师协会 (IIA)5. 微软 (Microsoft)6. 甲骨文 (Oracle)7. 项目管理协会 (PMI)8. 红帽 (Red Hat) 证书推荐 1. 六西格玛 (6 Sigma) 介绍：六西格玛是一种…...

编程日记 2025/7/2 21:02:15

linux》》docker 、containerd 保存镜像、打包tar、加载tar镜像

Linux》》docker: 默认情况下，Docker镜像保存在/var/lib/docker/目录下。当您使用docker pull命令从Docker Hub或私有镜像仓库中拉取镜像时，Docker会自动将镜像文件保存在/var/lib/docker/image/目录下。每个镜像都由一个或多个层组成，这些…...

编程日记 2025/7/3 1:22:55

大数据（2）Hadoop架构深度拆解：HDFS与MapReduce企业级实战与高阶调优

目录一、分布式系统的设计哲学演进1.1 从Google三驾马车到现代数据湖二、企业级HDFS架构全景图2.1 联邦架构的深度实践2.2 生产环境容灾设计2.3 性能压测方法论三、MapReduce引擎内核解密3.1 Shuffle机制全链路优化3.2 资源调度革命：从MRv1到YARN3.3 企业级编码规…...

编程日记 2025/7/2 1:34:32

【数学建模】动态规划算法(Dynamic Programming，简称DP)详解与应用

动态规划算法详解与应用文章目录动态规划算法详解与应用引言动态规划的基本概念动态规划的设计步骤经典动态规划问题1. 斐波那契数列2. 背包问题3. 最长公共子序列(LCS) 动态规划的优化技巧动态规划的应用领域总结引言动态规划(Dynamic Programming，简称DP)是一…...

编程日记 2025/6/30 8:39:46

UE学习记录part11

第14节 breakable actors 147 destructible meshes a geometry collection is basically a set of static meshes that we get after we fracture a mesh. 几何体集合基本上是我们在断开网格后获得的一组静态网格。选中要破碎的网格物品，创建集合可以选择不同的…...

编程日记 2025/7/2 5:17:35

LeetCode知识点整理

1、Scanner 输入： import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner scanner new Scanner(System.in);// 读取整数int num scanner.nextInt();// 读取一行字符串String line scanner.nextLine();scanner.close();…...

编程日记 2025/7/3 8:56:40

浅析车规芯片软错误防护加固的重要性

随着汽车电子技术的飞速发展，汽车已经从传统的机械交通工具转变为高度依赖电子系统的智能移动终端。车规芯片作为汽车电子系统的核心部件，其可靠性和安全性直接关系到车辆的正常运行和驾乘人员的安全。然而，车规芯片在复杂的运行环境中面临着…...

编程日记 2025/7/4 1:30:29

Android Jetpack学习总结（源码级理解）

ViewModel 和 LiveData 是 Android Jetpack 组件库中的两个核心组件，它们能帮助开发者更有效地管理 UI 相关的数据，并且能够在配置变更（如屏幕旋转）时保存和恢复 UI 数据。 ViewModel作用瞬态数据丢失的恢复，比如横竖…...

编程日记 2025/7/3 22:29:29

Matlab_Simulink中导入CSV数据与仿真实现方法

前言在Simulink仿真中，常需将外部数据（如CSV文件或MATLAB工作空间变量）作为输入信号驱动模型。本文介绍如何高效导入CSV数据至MATLAB工作空间，并通过From Workspace模块实现数据到Simulink的精确传输，适用于运动控制…...

编程日记 2025/6/28 4:11:18

Go 语言规范学习（6）

文章目录 StatementsTerminating statementsEmpty statementsLabeled statementsExpression statementsSend statementsIncDec statementsAssignment statementsIf statementsSwitch statementsExpression switchesType switches For statementsFor statements with single con…...

编程日记 2025/7/3 21:24:14

相关文章：