nextTick 真实业务场景
现在这个页面只负责组织展示：原来的基础 demo 还在，同时把业务 demo 全拆成了独立组件，并补了表格筛选、提交校验、弹窗测量这类更偏数据流的 nextTick 场景。
基础场景：状态更新后同步读 DOM 会拿到旧值，await nextTick() 后才是最新文本。
这是最基础的版本：先改响应式状态，再分别在同步阶段和 nextTick() 之后读取 DOM 文本，能直接看到同一轮刷新前后的差异。
- 1. 点击按钮后先执行 count.value += 1
- 2. 紧接着读取当前 span.textContent
- 3. await nextTick() 后再读取一次 DOM
这里除了原来的 3 个业务场景，还新增了“表格筛选后滚到首条结果”“提交后聚焦错误字段”“弹窗打开后测量列表高度”3 个更偏数据流和表单流的真实例子。
新增聊天、订单轨迹或系统通知后，等待列表完成渲染，再滚动到最底部。
聊天窗口、订单轨迹、告警流常见的需求是“新增一条后自动滚到底部”。如果同步读取 scrollHeight，拿到的还是旧值，因此要等 nextTick() 之后再滚动。
- 1. 追加一条新的订单通知
- 2. 同步读取列表 scrollHeight 并尝试滚动
- 3. await nextTick() 后再读取高度并滚到底部
搜索弹层、筛选抽屉、编辑表单打开后，要在 DOM 挂载完成后再 focus 输入框。
搜索弹层、抽屉、筛选面板在打开后往往需要马上聚焦第一个输入框。问题在于输入框是在本轮更新里新挂载的，所以必须等 nextTick() 之后再调用 focus()。
- 1. 打开高级筛选面板
- 2. 同步阶段输入框还没有挂载完成
- 3. await nextTick() 后聚焦关键字输入框
手风琴、详情抽屉展开后，需要在布局刷新完成后测量高度以驱动滚动和动画。
手风琴、订单详情抽屉、商品详情区经常要在展开后测量高度，去驱动滚动、动画或埋点。同步测量拿到的还是旧高度，要等 nextTick() 后再测一次。
- 1. 切换订单详情区的展开状态
- 2. 同步阶段读取到的还是旧高度
- 3. await nextTick() 后再拿到新高度
切换订单筛选条件后，等待表格结果刷新，再自动滚到新的首条命中记录。
客服工单、风控台账、售后列表经常会在筛选后自动滚到首条命中结果。问题在于筛选结果也是本轮更新的一部分，必须等 nextTick() 后再定位首条新结果。
| 订单号 | 客户 | 状态 | 金额 | 备注 |
|---|---|---|---|---|
| A-1024 | 上海徐汇门店 | 待发货 | ¥1,280 | 等待波次出库 |
| A-1025 | 苏州工业园 | 已完成 | ¥980 | 已签收 |
| A-1026 | 深圳南山客户 | 待风控 | ¥2,430 | 等待人工复核 |
| A-1027 | 北京朝阳客户 | 退款中 | ¥560 | 退款审核中 |
| A-1028 | 杭州西湖门店 | 待发货 | ¥1,120 | 拣货完成 |
| A-1029 | 武汉光谷仓 | 待风控 | ¥3,100 | 需补充发票信息 |
| A-1030 | 成都高新区客户 | 退款中 | ¥760 | 等待退款到账 |
| A-1031 | 广州天河客户 | 已完成 | ¥640 | 回访完成 |
| A-1032 | 天津滨海门店 | 待发货 | ¥1,860 | 待分配骑手 |
| A-1033 | 厦门湖里客户 | 待风控 | ¥1,420 | 身份核验异常 |
- 1. 切换筛选条件，表格准备重新渲染
- 2. 同步阶段读取到的还是旧首条结果
- 3. await nextTick() 后滚到新的首条命中记录
表单提交后，等错误样式和提示渲染完成，再自动 focus 第一个错误输入框。
表单提交通常要在渲染出错误提示后，把焦点移动到第一个错误字段，方便用户立刻修正。错误样式和提示文案同样属于本轮更新，所以要等 nextTick() 之后再 focus。
- 1. 点击提交后先更新错误状态
- 2. 同步阶段还拿不到新的首个错误字段
- 3. await nextTick() 后再 focus 首个错误输入框
批量发送或通知弹窗打开后，等列表挂载完成，再测量高度决定布局策略。
营销、消息中心、批量通知类弹窗经常要在打开后测量接收人列表的高度，决定是直接展开还是切换成固定高度滚动容器。弹窗内容本身是新挂载的，必须等 nextTick() 后再测量。
- 1. 打开批量发送弹窗
- 2. 同步阶段列表容器还没真正挂载完成
- 3. await nextTick() 后再测量列表高度决定布局策略