Appearance
前端架构（进阶：选型对比 + 了解级）
本章管什么：面试里「为什么选这个」——先定场景形态（官网 / H5 / 中后台 / 小程序 / 混合 / 微前端），再选渲染方式与框架；以及 Vue2 vs Vue3、Vuex vs Pinia、虚拟 DOM、Vite vs Webpack。后半微前端 / 设计模式 / 组件库是了解级。
本章不管什么
内容 去哪看 Vue 怎么写（钩子、指令、传值） Vue2 · Vue3 Vite/Webpack 更细的 ESM 展开、项目性能清单、Axios 工程化 Webpack 打包流程、Loader/Plugin 构建原理 TS 语法与类型 TypeScript SPA 为什么伤 SEO、SSR/SSG/预渲染 浏览器 · SEO 和基础的关系：基础章答「怎么用」；本章答「怎么选、为什么换」。
A. 选型与对比（进阶主战场）
1. 前端怎么做技术选型？按场景怎么选？
别一上来比 Vue / React / Angular。 先问项目是什么形态、受什么约束，再选渲染方式和框架。
第一步：定交付形态
| 形态 | 典型约束 |
|---|---|
| 官网 / 营销落地页 | SEO、首屏 HTML、运营改文案、分享链接 |
| 中后台管理系统 | 表格表单多、登录权限；不在乎 SEO |
| 移动 H5 / 活动页 | 机型、微信环境、包体、打开速度；SEO 看是否要被外搜 |
| 小程序 | 主包体积、原生组件、平台审核 |
| App 混合 | WebView 嵌 H5，或 uni / RN / Flutter 跨端 |
| 微前端 | 多团队、多技术栈、巨石拆分、独立部署 |
第二步：定渲染 / 出 HTML 的方式
- CSR（客户端渲染）：浏览器先拿到空壳再跑 JS 画页面。中后台、强交互 App 内页常用。默认的 Vue/React SPA 多半是这路。
- SSR / SSG / 预渲染：服务端或构建期先出带正文的 HTML。官网、要被搜索引擎收录时优先考虑。细节见 SEO。
第三步：按场景举例（面试就这么讲）
| 场景 | 常见选法 | 为什么（要点） |
|---|---|---|
| 官网 | Next.js（React 系）或 Nuxt（Vue 系）；或静态站 + 预渲染 | 要 SEO 和首屏 HTML。Next/Nuxt 默认 SSR/SSG 友好。 |
| 官网为什么不直接上「纯 CSR 的 Vue/React SPA」 | 不是 Vue/React 不能做官网 | 默认 CSR 时爬虫常先看到空 #app，还要自己接 SSR/预渲染；官网场景用 Next/Nuxt 路径更顺。 |
| 中后台 | Vue + Vite / React + 组件库 | SEO 不敏感，要的是表格、权限、研发效率。 |
| 微信内活动 H5 | 轻量页或既有 Vue/React SPA + 适配 | 重点是首屏、JSSDK、包体；不一定上 Next。外搜 SEO 不重要时 CSR 够用。 |
| 要被百度/Google 搜到的 H5 落地页 | 可考虑 Nuxt/Next 或预渲染 | 和官网同一逻辑：需要 HTML 里先有正文。 |
| 小程序 | uni-app / 原生 / Taro | 多端复用 vs 平台深度；团队已有 Vue 常选 uni。 |
| 混合 App | WebView 套 H5，或 uni 出 App | 看要不要强原生体验、团队会不会原生。 |
| 多团队巨石 | 微前端（qiankun 等） | 独立部署、技术栈可并存；代价是隔离与通信。见本章 B 段。 |
选型收口一句：场景约束 → 要不要 SEO/出 HTML → 再选框架与工具。没有绝对最好的框架。
同形态下：Vue / React / Angular 怎么补一句
已经定了「中后台用 CSR SPA」之后，才轮到比写法：Vue 模板 + 官方全家桶、上手快；React JSX + 生态自选；Angular 最全最重。jQuery 是命令式改 DOM，不是这一档。细节不必当主线背。
🎤 口述精简版
技术选型先看场景：官网、中后台、H5、小程序。官网要 SEO，常用 Next / Nuxt 出带正文的 HTML；纯客户端 SPA 空壳不适合当官网默认方案。中后台不在乎 SEO，Vue / React + 组件库做 CSR。微信活动页多半只在微信打开、不靠外搜，重点是适配、包体、JSSDK，一般不必为 SEO 上 Next。小程序看 uni 或原生；多团队巨石再谈微前端。同形态再补 Vue / React；场景先定，框架后选。
2. Vue2 和 Vue3 差在哪？为什么新项目选 3？
基础用法（指令、v-if / v-show、路由 query / params）几乎一样，那些细节看 Vue2 / Vue3。本章只比取舍。总览也可对照 Vue3 核心区别。
| Vue2 | Vue3 | |
|---|---|---|
| 响应式 | defineProperty，增删属性侦不到 | Proxy，增删、数组下标更自然 |
| 组织代码 | 选项式：data / methods 按类型拆 | 组合式：按功能聚，<script setup>（见 传值写法） |
| 生命周期 | beforeDestroy / destroyed | beforeUnmount / unmounted；setup 里 onMounted |
| 状态库 | Vuex（有 mutation） | Pinia（action 直接改 state） |
| 其它 | 单根节点 | 多根、Teleport、更好 TS、包可 tree-shake |
响应式为啥换成 Proxy？（常追问）
两边都是「劫持数据 → 依赖收集 → 改了通知更新」。差在怎么劫持：
Object.defineProperty（Vue2） | Proxy（Vue3） | |
|---|---|---|
| 劫持粒度 | 给已有属性逐个加 getter / setter | 代理整个对象 |
| 新增 / 删除属性 | 侦不到，要 Vue.set / Vue.delete | 能侦到 |
| 数组 | 下标赋值、改 length 不直观，靠重写 push 等 | 下标、length 更自然 |
| 嵌套 | 初始化往往递归全包，成本高 | 用到再代理（懒代理），初始化更省 |
所以面试说「Proxy 更好」：少坑、数组好用、初始化更省，不是原理换了一套。
为什么新项目倾向 Vue3（面试常问「有哪些优化」）：
- 响应式：Proxy 少坑，新增字段、数组下标更自然，少
Vue.set - 性能：编译期静态提升、补丁标记；按需引入，包更容易 tree-shake
- 工程：对 TypeScript 更友好；组合式方便抽 hooks / composables
- 能力：多根节点、Teleport、Suspense 等
- 生态：官方推 Pinia、Vite 模板默认 Vue3
老项目 Vue2 能跑就不必为换而换；新开或大改优先 3。选项式在 Vue3 仍可用。
🎤 口述精简版
Vue2 / Vue3 基础用法差不多。差在：响应式 defineProperty → Proxy；选项式 → 组合式；销毁钩子改名；Vuex → Pinia。新项目选 3 是坑少、打包更好、生态在 3；老项目能跑不必硬换。Proxy 为什么更好见上文对比表。
3. Vuex 和 Pinia 差在哪？
都是全局状态。Pinia 是 Vue3 官方推荐，对标 Vuex。用法细节：Vuex · Pinia。对比见下表；和 Vue2/3 总对比见 上一节。
| Vuex | Pinia | |
|---|---|---|
| 改数据 | mutation 同步改，action 再 commit | 没有 mutation，action 里直接改 state |
| 拆模块 | module 嵌进一个大 store | 一个 defineStore 就是一个模块 |
| TS | 绕 | 友好 |
| 持久化 | vuex-persistedstate | pinia-plugin-persistedstate |
| API | commit / dispatch | useXxxStore() 直接用 |
持久化思路一样：刷新内存空，登录态存 localStorage 再灌回，业务数据进页再请求。
小项目、状态少，也可以不急上仓库，props / provide 够用再上。
🎤 口述精简版
都是全局状态。Vuex 改数据走同步 mutation，action 再 commit，模块嵌大 store。Pinia 去掉 mutation，action 直接改；一个 defineStore 一个模块，TS 更好写。持久化一样：登录态存本地，业务数据进页再请求。Vue3 用 Pinia 因官方推、样板少；状态很少也可先不上。
4. 虚拟 DOM 是什么？对比直接操作真实 DOM 有什么优势？
虚拟 DOM：用 JS 对象描述真实 DOM。数据变了先在内存里 diff，再 patch 到真实 DOM。细节与 diff 流程见 Vue2 · 虚拟 DOM · diff。
| 直接操作真实 DOM | 虚拟 DOM | |
|---|---|---|
| 写法 | 自己选节点改 | 改数据，框架算差异 |
| 成本 | 常触发重排 / 重绘 | 计算多在内存，再批量更新 |
| 其它 | 绑死浏览器 DOM | 可跨端；配合声明式 |
优势点名：少瞎改真实 DOM、好合并更新、跨端、声明式心智。别说满：不是一定比手写最优操作更快。
🎤 口述精简版
虚拟 DOM 用 JS 对象描述页面。数据变了先 diff 再 patch。比直接改真实 DOM：少重排重绘、能合并更新、可跨端。不是绝对更快，复杂页面更划算。
5. Webpack 和 Vite 差在哪？Vite 为什么快？
面试偏怎么选、为什么快。更细的 ESM 对照表见 工程化；打包流程 / Loader 见 构建。
| Webpack | Vite | |
|---|---|---|
| 开发启动 | 常先打包再启动，项目越大越慢 | 不先全量打包，浏览器按需加载 |
| 热更新 | 改动常牵涉较大重编译 | 改哪个模块更新哪个，通常更快 |
| 生产打包 | 自身生态打包 | 默认 Rollup |
| 定位 | 老牌打包器，插件生态大 | 现代开发服务器 + 打包方案 |
为什么 Vite 开发快（点名即可）
- 原生 ESM：浏览器直接
import，源码按需请求 - esbuild 预构建：把
node_modules里零碎 / CJS 依赖先打成少量 ESM - 热更新更轻：主要换相关模块，依赖已缓存
生产仍要打包（请求数、兼容、压缩），不是上线也裸奔几百个 ESM。新项目常选 Vite；老 Webpack 项目能跑、插件深度绑定，不必为换而换。
🎤 口述精简版
Webpack 开发常先打包再启动，项目大就慢。Vite 开发靠浏览器原生 ESM 按需加载，依赖用 esbuild 预构建，所以冷启动和热更新快；生产打包交给 Rollup。可以记：开发快靠 ESM + esbuild，产物质量靠 Rollup。
B. 了解级（点到为止）
没有微前端实战也没关系：被问到能聊清概念、场景、主流方案、隔离思路即可，不必钻源码。
6. 什么是微前端？为什么用它？
核心概念
把一个大应用拆成多个独立开发、独立部署、技术栈可不同的子应用，运行时组合成一个完整产品。
解决什么
- 巨石应用越来越难维护
- 多团队并行开发、互不阻塞
- 渐进升级（老 Vue2 模块 + 新 Vue3 模块长期共存）
🎤 口述精简版
微前端把大系统拆成多个能独立开发部署的小应用拼一起，主要解巨石应用维护和老新共存；方案有 qiankun、Module Federation 等，了解概念就行。
7. 微前端主流方案与隔离思路？
主流方案
qiankun：基于 single-spa，提供 JS 沙箱 + 样式隔离，接入成本低Module Federation：Webpack5 模块级共享，免运行时挂载，适合同构建体系无界/ iframe：iframe 隔离最彻底但通信成本高
隔离关键（常被追问）
- JS 沙箱：用 Proxy 隔离全局变量（window），避免子应用互相污染
- CSS 隔离：加前缀 / scoped / Shadow DOM，防止样式串台
🎤 口述精简版
方案记住 qiankun 和 Module Federation；隔离靠 JS 沙箱和 CSS 作用域——你没实战，点到机制层即可。
8. 前端设计模式：发布-订阅、单例、工厂、策略？
常见几类
- 发布-订阅（EventBus / 自定义事件）：解耦生产者与消费者
- 单例（全局唯一）：store、router、全局弹窗管理
- 工厂：封装对象创建，如组件库、SDK 实例
- 策略：算法可替换，如表单校验规则集合
理解「解决什么场景」比背定义重要，能举你项目里的例子最加分。
🎤 口述精简版
发布订阅解耦、单例保证唯一、工厂管创建、策略管可替换算法；会举你项目里的例子最加分。
9. 为什么要做组件库 / 设计系统？
价值
统一视觉与交互、提升多项目复用、降低协作成本、保证一致性。uniapp 项目可抽跨端基础组件库（注意各端兼容）。
🎤 口述精简版
组件库就是统一规范 + 复用提效，跨端项目里还要注意各端兼容。