一个列表页面，初级中级高级前端之间的鸿沟就显出来了

jinchanchan

你是不是也写过 20+ 个中后台列表页，却总觉得跳不出 CRUD？你以为你是高级了，其实你只是熟练了。

你可能写过几十个中后台列表页，从最早用 v-model 到后来自定义 hooks，再到封装组件、状态缓存、schema 驱动。
但同样是一个列表页：

• [color=var(--text)]初级在堆功能；
• [color=var(--text)]中级在理结构；
• [color=var(--text)]高级在构建规则。
  

我们就以这个最常见的中后台场景：搜索 + 分页 + 表格 + 编辑跳转，来看看三个阶段的认知差异到底在哪。
写完 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，写完一个别人不敢接的黑盒。
中级组件关注复用，高级组件关注职责边界和组合方式，具备**“可预测性、可替换性、可拓展性”**。

---

页面能力 ≠ 项目交付能力

你能写页面，但你未必能独立交付项目。缺的可能是：

• 多模块协同能力；
• 权限 / 字段 / 配置抽象力；
• 异常兜底与流程控制设计。
  

从写完一个页面，到撑起一个系统，中间差的是“体系构建力”。

---

结语：页面 ≠ 技术，堆功能 ≠ 成长

初级在交付页面，中级在建设结构，高级在定义规则。
真正的高级前端，已经不写“页面”了，而是在定义“页面该怎么写”。
转自：喝拿铁的桔子
顺便给大家分享一下，民族企业大厂，前后端测试捞人，待遇给的还不错，感兴趣的可以来试试！