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

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

多模块协同能力；
权限 / 字段 / 配置抽象力；
异常兜底与流程控制设计。
从写完一个页面，到撑起一个系统，中间差的是“体系构建力”。

结语：页面 ≠ 技术，堆功能 ≠ 成长
初级在交付页面，中级在建设结构，高级在定义规则。
真正的高级前端，已经不写“页面”了，而是在定义“页面该怎么写”。
转自：喝拿铁的桔子