- 累计产出120 加个组件,为什么要封装这么多组件?
- 业务驱动:根据页面需求,把常用 UI(按钮、输入框、弹窗、表格等)抽象成组件,保证一致性。
- 维度考量:从布局、表单、数据展示、工具类等不同维度拆分,颗粒度既不能太粗(难复用),也不能太细(维护成本高)。
- 团队协作:核心团队负责基础组件,业务团队按需扩展,分层维护。
- 复用率:整体组件复用率达60%~80%,剩余按业务差异扩展。
- 打包 560+ 页面会不会有性能问题?解决方案?
- 问题:单次全量打包时间长、产物体积大、部署更新慢。
- 优化:
- 按页拆分 entry,开启多进程 parallel-build;
- 开启 cache、DLLPlugin、babel-loader cache;
- 路由懒加载、Code Splitting、动态 import;
- 资源压缩(Terser、cssnano)、开启 gzip/Brotli;
- CI/CD 增量构建、灰度发布。
- Vue3 中 ref 和 reactive 区别?
- ref:可包裹基本类型或对象,返回
{ value: ... }的响应式对象,访问/赋值需.value。 - reactive:只能接收对象,返回 Proxy,直接访问其属性即响应式。
- ref:可包裹基本类型或对象,返回
- computed 与 watch 区别?
- computed:惰性求值、带缓存,适合计算衍生状态。
- watch:侦听响应式源,执行副作用(异步或同步),可配置 immediate、deep。
- beforeMount 和 mounted 区别?
- beforeMount:模板已编译、但 DOM 未挂载到页面上,此时拿不到真实 DOM。
- mounted:DOM 已插入页面,可执行 DOM 操作、第三方库初始化。
- 0→1 新项目搭建要考虑哪些?
- 技术选型:框架(Vue/React)、状态管理(Pinia/Redux)、UI 库、构建工具(Vite/Webpack)
- 项目结构:目录分层、约定规范
- 性能:首屏渲染、Code Splitting、CDN、缓存策略
- 跨端适配:响应式布局、rem/vw、PostCSS
- 开发流程:CI/CD、自动化测试、代码规范、日志/监控、安全
- 团队可维护性:文档、模板、脚手架
- 项目整体性能优化手段?
- 资源优化:压缩、合并、CDN、HTTP2/3
- 懒加载:路由、组件、图片
- Tree Shaking、Code Splitting
- 预加载/预取(preload、prefetch)
- Web Worker、微前端(大型项目)
- 路由两种模式?
- Hash 模式:URL 中
#后的部分由前端拦截,浏览器不会向服务器请求; - History 模式:基于 HTML5 History API,URL 美观,但刷新需后端做所有路由重写。
- Hash 模式:URL 中
- Hash 模式如何通过
#定位?能否用锚点?部署区别?重写配置作用?- 定位:浏览器遇到
#xxx不请求服务器,JS 通过window.location.hash或onhashchange处理路由。 - 锚点:可共存,但要避免路由和页面内部锚点冲突(可在路由前加
/前缀)。 - 部署:Hash 模式无需服务器配置;History 模式要把除静态资源外的所有路由指向
index.html。 - 重写(rewrite):保证 SPA 路由跨路径刷新时,服务器返回同一个入口页面。
- 定位:浏览器遇到
- 什么情况下会导致内存泄漏?
- 全局对象/闭包长时间持有大对象
- 未解绑事件监听、定时器(setInterval、setTimeout)
- 未取消订阅(WebSocket、RxJS、Promise)
- DOM 引用未释放(组件卸载后仍在引用)
- TypeScript 数据类型?
- 原始类型:number、string、boolean、null、undefined、symbol、bigint
- 对象类型:object、Array、Tuple、enum、Function
- 特殊类型:any、unknown、void、never
- 组合类型:union、intersection、literal、interface、type alias
- rem 的缺点及精度问题?根字体大小怎么确定?
- 缺点:根字体一变,全局联动;在不同设备上可能出现四舍五入带来的小数精度误差。
- 解决:减少小数、在 PostCSS/构建时做 px2rem、控制根字体为可整除值。
- 根字体:通常按设计稿宽度动态计算,如
html { font-size: clientWidth/10 + 'px'; }或用 flexible 库,保证 1rem = 设计稿 10px。
港股证劵 社招 一面
张小明
前端开发工程师
--工具和MCP调用
1. 工程结构概览 Spring AI 提供了完整的工具调用(Tool Calling)能力,让 AI 模型可以调用外部服务。同时,Spring AI 还支持 MCP(Model Context Protocol),这是一个标准化的工具协议。 spring-a…
每日 AI 评测速递来啦(12.17)
司南Daily Benchmark 专区今日上新! KFS-Bench 首个面向长视频问答的关键帧采样评测基准,通过引入多场景标注,实现对采样策略直接且稳健的评估。 https://hub.opencompass.org.cn/daily-benchmark-detail/2512%2014017 Soul-Bench 一个面…
驾驭复杂性,提高效率:CES 2026:dSPACE 展示用于 SDV 开发的测试和 AI 解决方案
在 2026 年国际消费电子展 (CES 2026) 上,dSPACE 将展示能够帮助汽车制造商高效驾驭软件定义汽车开发过程中日益增加的复杂性的端到端测试解决方案。dSPACE 将在西展厅 4500 号展位展示整套验证产品组合,其中包括基于人工智能 (AI) 支持的软件在环和硬件…
Sutherland与ComplyAdvantage推出AI原生“统一金融犯罪合规”解决方案,旨在打击日益复杂的新一代金融犯罪
全新合作伙伴关系融合Sutherland的AI原生金融犯罪合规专业能力与ComplyAdvantage的Mesh风险智能平台,打造集成化、模块化的AI驱动生态系统,覆盖欺诈防控、反洗钱、风险管控和交易监控四大场景。 全球业务与数字转型领军企业Sutherland今日宣布ÿ…
金仓数据库KingbaseES:从兼容到超越,打造企业级数据库新标杆
兼容是对企业历史投资的尊重是确保业务平稳过渡的基石然而这仅仅是故事的起点在数字化转型的深水区,企业对数据库的需求早已超越“语法兼容”的基础诉求。无论是核心业务系统的稳定运行,还是敏感数据的安全防护,亦或是复杂场景下的性能优化&a…
关于AI工具实战测评的技术
AI工具实战测评框架设计测评AI工具需要从多个维度展开,包括功能实用性、性能表现、易用性、适用场景等。以下为技术测评的核心框架和具体方法。功能覆盖与核心能力测试AI工具的核心功能是否与宣传一致。例如自然语言处理工具需验证文本生成、翻译、摘要等能力&#…