一个列表页面，初级中级高级前端之间的鸿沟就显出来了
## 你是不是也写过 20+ 个中后台列表页，却总觉得跳不出 CRUD？你以为你是高级了，其实你只是熟练了。你可能写过几十个中后台列表页，从最早用 v-model 到后来自定义 hooks，再到封装组件、状态缓存、schema 驱动。
但同样是一个列表页：
- **初级**在堆功能；
- **中级**在理结构；
- **高级**在构建规则。
我们就以这个最常见的中后台场景：**搜索 + 分页 + 表格 + 编辑跳转**，来看看三个阶段的认知差异到底在哪。
写完 vs 写清楚 vs 写系统。
---
## 等级开发目标
| 等级 | 开发目标 |
| --- | --- |
| 初级 | 页面能用，接口通，功能不报错 |
| 中级 | 页面结构清晰、组件职责明确、状态复用 |
| 高级 | 页面只是 DSL 映射结果，字段配置驱动生成，具备平台能力 |
---
## 搜索区域的处理
| 等级 | 做法 |
| --- | --- |
| 初级 | `el-form` + `v-model` + 手写查询逻辑 |
| 中级 | 封装 `SearchForm.vue`，支持 props 字段配置 |
| 高级 | 使用字段配置 schema，支持字段渲染、联动、权限控制、字典动态加载 |
- 初级看起来能用，实则字段散落、表单逻辑零散；
- 中级可复用，但配置灵活性不足；
- 高级直接写 schema 字段声明，字段中心统一维护，整个搜索区域自动生成。
---
## 表格区域的组织
| 等级 | 做法 |
| --- | --- |
| 初级 | 表格写死在页面中，columns 手动维护 |
| 中级 | 封装 `DataTable` 组件，支持 columns + slots |
| 高级 | 表格由字段配置自动渲染，支持国际化、权限、字典映射、格式化 |
高级阶段的表格是**“字段中心驱动下的视图映射”**，而不是手写 UI 组件。
---
## 页面跳转行为
| 等级 | 做法 |
| --- | --- |
| 初级 | `router.push` + 返回后状态丢失 |
| 中级 | 缓存搜索条件和分页，支持跳转回填 |
| 高级 | 路由状态与组件状态解耦，编辑行为可抽象为弹窗、滑窗，不依赖跳转 |
体验上，初级只能靠刷新；中级保留了状态；高级压根不跳页，抽象为状态变更。
---
## 字段结构理解
| 等级 | 做法 |
| --- | --- |
| 初级 | 页面写死 `status === 1 ? '启用' : '禁用'` |
| 中级 | 使用全局字典表：`getDictLabel('STATUS', val)` |
| 高级 | 字段中心统一配置字段含义、展示方式、权限与控件类型，一份声明全平台复用 |
高级不写字段映射，而是**写字段定义**。字段即规则，规则即视图。
---
## 工程感理解
你以为工程感是**“项目结构清晰”**，其实高级工程感是：
- 样式有标准；
- 状态有模式；
- 路由有策略；
- 权限有方案；
- 字段有配置中心。
**一切都能预期，一切都能对齐。**
---
## 行为认知：你以为你在“配合”，其实你在“等安排”
你说**“接口还没好我就做不了页面”**。你说**“等产品图出了我再看组件拆不拆”**。
但高级前端早就开始：
- Mock 数据、虚拟字段结构；
- 自定义 `useXXX` 模块推动业务流转；
- 甚至反推接口结构，引导后端设计。
**配合和推进，只有一线之隔。**
---
## 低水平重复劳动：你写了很多，但没真正沉淀
你遇到过哪些**“看似很忙，实则在原地转圈”**的开发场景？
最典型的，就是以下这三类**“中后台系统里的低水平重复劳动”**：
### ❶ 每页都重复写 table columns 和格式化逻辑
- 每页重复定义 columns；
- 状态字段每次都手写 `status === 1 ? '启用' : '停用'`；
- 日期字段每页都在 render 中 format；
- 操作列、index 列、字典值写满重复逻辑。
📉 **问题**：代码冗余，字段维护困难，一改动就全局找引用。
✅ **提升方式**：
- 抽象字段结构配置（如 `fieldSchema`）；
- 字段渲染、字典映射、权限统一管理；
- 一份字段配置驱动表格、表单、详情页。
### ❷ 每个列表页都重复写搜索逻辑和状态变量
- 每页都写 `searchForm: {}`、`search()`、`reset()`；
- query 参数、分页、loading 状态变量混杂；
- 页面跳转回来状态丢失，刷新逻辑重复拼接。
📉 **问题**：页面逻辑分散、复用性差，体验割裂。
✅ **提升方式**：
- 自定义 hook 如 `useSmartListPage()` 统一管理列表页状态；
- 统一封装查询、分页、loading、缓存逻辑；
- 形成**“搜索+表格+跳转+回填”**标准列表模式。
### ❸ 反复堆砌跳转编辑流程，缺乏行为抽象
- 每次跳转写 `this.$router.push({ path, query })`；
- 返回页面刷新列表，无上下文保留；
- 编辑页都是复制粘贴模板，字段改名。
📉 **问题**：编辑与跳转强耦合，逻辑割裂，流程不清。
✅ **提升方式**：
- 将**“查看 / 编辑 / 创建”**抽象为页面模式；
- 支持弹窗、滑窗模式管理，跳转可选；
- 解耦跳转与行为，页面由状态驱动。
---
## 组件理解：你以为你在写组件，其实你在制造混乱
组件抽象不清、slot 滥用、props 大杂烩、逻辑耦合 UI，写完一个别人不敢接的黑盒。
**中级组件关注复用，高级组件关注职责边界和组合方式**，具备**“可预测性、可替换性、可拓展性”**。
---
## 页面能力 ≠ 项目交付能力
你能写页面，但你未必能独立交付项目。缺的可能是：
- 多模块协同能力；
- 权限 / 字段 / 配置抽象力；
- 异常兜底与流程控制设计。
**从写完一个页面，到撑起一个系统，中间差的是“体系构建力”。**
---
## 结语：页面 ≠ 技术，堆功能 ≠ 成长
初级在交付页面，中级在建设结构，高级在定义规则。
**真正的高级前端，已经不写“页面”了，而是在定义“页面该怎么写”。**
转自：喝拿铁的桔子
顺便给大家分享一下，民族企业大厂，[前后端测试](https://jsj.top/f/o38ijj)捞人，待遇给的还不错，感兴趣的可以来试试！
页:
[1]