你是不是也写过 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 })； - 返回页面刷新列表，无上下文保留；
- 编辑页都是复制粘贴模板，字段改名。
📉 问题： 编辑与跳转强耦合，逻辑割裂，流程不清。
✅ 提升方式：
- 将"查看 / 编辑 / 创建"抽象为页面模式；
- 支持弹窗、滑窗模式管理，跳转可选；
- 解耦跳转与行为，页面由状态驱动。
真正的成长，不是写得多，而是提取出通用能力、形成规范。
中后台系统里最常见的低水平重复劳动：
- 每次都手写 table columns、格式化字段；
- 搜索表单每页都重新写逻辑、状态绑定；
- 分页、loading、跳转逻辑全靠临时拼；
你遇到过哪些 "看似很忙，实则在原地转圈" 的开发场景？欢迎在评论区说说你的故事。
组件理解：你以为你在写组件，其实你在制造混乱
组件抽象不清、slot 滥用、props 大杂烩、逻辑耦合 UI，写完一个别人不敢接的黑盒。
中级组件关注复用，高级组件关注职责边界 和组合方式，具备"可预测性、可替换性、可拓展性"。
页面能力 ≠ 项目交付能力
你能写页面，但你未必能独立交付项目。 缺的可能是：
- 多模块协同能力
- 权限 / 字段 / 配置抽象力
- 异常兜底与流程控制设计
从写完一个页面，到撑起一个系统，中间差的是"体系构建力"。
结语：页面 ≠ 技术，堆功能 ≠ 成长
初级在交付页面，中级在建设结构，高级在定义规则。 真正的高级前端，已经不写"页面"了，而是在定义"页面该怎么写"。