我们去年接手了一个运行了三年的电商后台系统，最早是用 Vue 2 写的，后来硬迁到了 Vue 3.2，但代码还是全 Options API 风格。那个订单列表页的组件我印象特别深，光 data 里就有 40 多个字段，methods 里塞了 30 多个函数，computed 和 watch 也各占了一屏。我第一次打开那个 .vue 文件时，光滚动条就拉了三次才到底，文件总行数 1870 行。
当时我们正准备给这个系统加一个“大促订单实时监控”的功能，需要在原有列表基础上增加实时刷新、异常标记、批量操作日志。我试着在 Options API 里加，发现改 data 要往上翻，改 methods 要往下翻，逻辑被拆得七零八落。比如“订单状态变更”这个功能，状态定义在 data，变更逻辑在 methods，依赖的计算属性在 computed，监听状态变化的 watch 又在另一个地方。改一个功能要跳四个地方，我当时就想，这要是再来个新人接手，估计得先花一周理清楚这些字段之间的调用关系。
后来我们决定用 Vue 3.4.21（2024年5月刚发的稳定版）的 Composition API 重构这个页面。我们没用 setup() 函数那种写法，直接上了