港股证劵 社招 一面

1. 累计产出120 加个组件，为什么要封装这么多组件？
   • 业务驱动：根据页面需求，把常用 UI（按钮、输入框、弹窗、表格等）抽象成组件，保证一致性。
   • 维度考量：从布局、表单、数据展示、工具类等不同维度拆分，颗粒度既不能太粗（难复用），也不能太细（维护成本高）。
   • 团队协作：核心团队负责基础组件，业务团队按需扩展，分层维护。
   • 复用率：整体组件复用率达60%~80%，剩余按业务差异扩展。
2. 打包 560+ 页面会不会有性能问题？解决方案？
   • 问题：单次全量打包时间长、产物体积大、部署更新慢。
   • 优化：
     1. 按页拆分 entry，开启多进程 parallel-build；
     2. 开启 cache、DLLPlugin、babel-loader cache；
     3. 路由懒加载、Code Splitting、动态 import；
     4. 资源压缩（Terser、cssnano）、开启 gzip/Brotli；
     5. CI/CD 增量构建、灰度发布。
3. Vue3 中 ref 和 reactive 区别？
   • ref：可包裹基本类型或对象，返回 { value: ... } 的响应式对象，访问/赋值需 .value。
   • reactive：只能接收对象，返回 Proxy，直接访问其属性即响应式。
4. computed 与 watch 区别？
   • computed：惰性求值、带缓存，适合计算衍生状态。
   • watch：侦听响应式源，执行副作用（异步或同步），可配置 immediate、deep。
5. beforeMount 和 mounted 区别？
   • beforeMount：模板已编译、但 DOM 未挂载到页面上，此时拿不到真实 DOM。
   • mounted：DOM 已插入页面，可执行 DOM 操作、第三方库初始化。
6. 0→1 新项目搭建要考虑哪些？
   • 技术选型：框架（Vue/React）、状态管理（Pinia/Redux）、UI 库、构建工具（Vite/Webpack）
   • 项目结构：目录分层、约定规范
   • 性能：首屏渲染、Code Splitting、CDN、缓存策略
   • 跨端适配：响应式布局、rem/vw、PostCSS
   • 开发流程：CI/CD、自动化测试、代码规范、日志/监控、安全
   • 团队可维护性：文档、模板、脚手架
7. 项目整体性能优化手段？
   • 资源优化：压缩、合并、CDN、HTTP2/3
   • 懒加载：路由、组件、图片
   • Tree Shaking、Code Splitting
   • 预加载/预取（preload、prefetch）
   • Web Worker、微前端（大型项目）
8. 路由两种模式？
   • Hash 模式：URL 中 # 后的部分由前端拦截，浏览器不会向服务器请求；
   • History 模式：基于 HTML5 History API，URL 美观，但刷新需后端做所有路由重写。
9. Hash 模式如何通过 # 定位？能否用锚点？部署区别？重写配置作用？
   • 定位：浏览器遇到 #xxx 不请求服务器，JS 通过 window.location.hash 或 onhashchange 处理路由。
   • 锚点：可共存，但要避免路由和页面内部锚点冲突（可在路由前加 / 前缀）。
   • 部署：Hash 模式无需服务器配置；History 模式要把除静态资源外的所有路由指向 index.html。
   • 重写（rewrite）：保证 SPA 路由跨路径刷新时，服务器返回同一个入口页面。
10. 什么情况下会导致内存泄漏？
    • 全局对象/闭包长时间持有大对象
    • 未解绑事件监听、定时器（setInterval、setTimeout）
    • 未取消订阅（WebSocket、RxJS、Promise）
    • DOM 引用未释放（组件卸载后仍在引用）
11. TypeScript 数据类型？
    • 原始类型：number、string、boolean、null、undefined、symbol、bigint
    • 对象类型：object、Array、Tuple、enum、Function
    • 特殊类型：any、unknown、void、never
    • 组合类型：union、intersection、literal、interface、type alias
12. rem 的缺点及精度问题？根字体大小怎么确定？
    • 缺点：根字体一变，全局联动；在不同设备上可能出现四舍五入带来的小数精度误差。
    • 解决：减少小数、在 PostCSS/构建时做 px2rem、控制根字体为可整除值。
    • 根字体：通常按设计稿宽度动态计算，如 html { font-size: clientWidth/10 + 'px'; } 或用 flexible 库，保证 1rem = 设计稿 10px。