知识库K20
框架与状态管理 · KNOWLEDGE CHAPTER
K20

Vue 渲染、生命周期与组合

Vue 组件同时有逻辑生命、DOM 位置与异步资源三种生命周期。渲染调度决定何时能读 DOM，组合函数决定谁清理资源，缓存与传送只改变其中部分关系，不会替应用补齐所有边界。

框架与状态管理2 道章节练习7 道主练关联
先修知识：K12 · 页面生命周期与调度K17 · DOM 事件与观察器K19 · Vue 响应式与数据契约

核心模型

Vue 组件同时有逻辑生命、DOM 位置与异步资源三种生命周期。渲染调度决定何时能读 DOM，组合函数决定谁清理资源，缓存与传送只改变其中部分关系，不会替应用补齐所有边界。

原理与机制

状态变化与 DOM 提交分两个时刻

Vue 合并同一轮状态修改，再刷新组件 DOM。一次交互后测量用 await nextTick；持续跟随某来源测量用 flush:post watcher，它们等待对应 DOM 更新，不保证图片、字体或浏览器绘制已完成。默认 watcher 通常早于所属组件 DOM 更新，flush:sync 则同步且不批处理。循环内每次写完都 nextTick 会拆散批处理，形成重复测量与布局；应先完成一组写入，再按真实需求集中读取。

异步副作用先建立失效关系

watcher 启动请求前就应创建取消器并注册清理，让切换来源或卸载立即使本轮失效。Vue 3.5 onWatcherCleanup 必须在同步阶段调用；回调参数 onCleanup 绑定实例，限制不同，但同样越早登记越可靠。取消节约资源，运行版本或 active 标记保护所有迟到写入。组合函数通常同步在 setup 建立 watcher 与生命周期归属，任意异步回调中才创建的 watcher 需自行停止；SSR 不访问 window，也不把用户可变状态放进共享模块单例。

缓存与传送没有抹掉资源责任

KeepAlive 离开视图常为停用而非卸载，轮询、媒体与连接可在 onActivated 启动、onDeactivated 暂停，最终卸载仍释放；重入必须幂等，账号切换需要失效缓存。Teleport 改的是实际 DOM 位置，逻辑 props、注入与组件事件仍沿组件树；原生事件走真实 DOM 路径。它解决裁剪或层叠问题，却不负责焦点圈定、返回焦点、背景不可交互或滚动锁。多弹层宜以栈和锁计数管理，避免关闭一层解锁全部。

模板编译给运行时提供可用证据

模板的受约束结构允许编译器识别稳定内容、标记动态文本或属性，并通过 Block Tree 缩小运行时关心的后代集合。静态提升或缓存的具体生成形态随版本变化，不应背成所有静态节点都搬到 render 外。JSX 与手写 render 更自由，也未必提供同等静态信息。动态插槽和大列表仍有协调与 DOM 成本，稳定 key 维护身份而非保证常数时间；性能瓶颈若是大量不可见节点，仍需分页或虚拟化。

延迟水合是把工作挪到合适时机

Vue 3.5+ 异步组件可按空闲、可见、媒体或交互进行水合，这仅适用于 SSR 输出已有 HTML 的情形。代码何时下载还由 loader 与预加载决定，延迟水合不等于延迟下载。关键表单若等首次点击才激活，会把初始化成本推给最敏感的交互，且只监听 click 易漏键盘路径。服务端与客户端首轮输出仍需一致。Teleport 的 defer 也只是同一挂载或更新 tick 内晚解析目标，不能等任意未来异步节点。

最小示例

javascript
javascript
import { ref, watch, toValue } from 'vue';
export function useResult(source, load) {
  const result = ref(null);
  const error = ref(null);
  watch(() => toValue(source), async (key, _, onCleanup) => {
    let active = true;
    const controller = new AbortController();
    onCleanup(() => { active = false; controller.abort(); });
    error.value = null;
    try {
      const value = await load(key, controller.signal);
      if (active) result.value = value;
    } catch (e) {
      if (active) error.value = e;
    }
  }, { immediate: true });
  return { result, error };
}

在组件 setup 中同步调用，load 为注入的异步读取函数。source 可是固定值、ref 或 getter；每次运行有自己的 active，A→B→A 时首个 A 即使最后完成也无权写入。这里沿用回调 onCleanup，若改用 3.5 onWatcherCleanup 必须仍在 await 前注册；真实界面还应按资源身份设计 loading 与旧结果展示策略。

环境：Vue 3.3+ 组合式 API 项目；在 setup 中同步调用，load 是调用方提供并支持 signal 的异步函数；onWatcherCleanup 的扩展讨论要求 3.5+。

核验：已静态审查示例与本章机制一致；未运行此示例，未进行框架或浏览器集成测试。观察结果为待复现的教学预期。

边界与取舍

边界

  • nextTick 不等待任意异步完成，也不保证已绘制；测量本身仍可能触发同步布局。
  • KeepAlive 停用不是销毁，Teleport 也不是完整模态框；二者都可能留下活着的副作用或焦点问题。
  • script setup 顶层 await 的实例上下文恢复是编译器特例，不能推广到任意 Promise 回调。

取舍

  • 保留实例减少重建并保存草稿，但增加内存和过期状态管理；限制缓存数并定义身份失效。
  • 推迟非关键水合降低启动 CPU，却可能抬高首次交互延迟；以低端设备、键盘路径和慢网决定策略。

口述示范

我先分清响应式更新、DOM 提交和浏览器绘制，再让异步资源始终有归属与清理。KeepAlive、Teleport 与延迟水合各改变一个维度，不能代替生命周期、无障碍或一致性设计。模板优化减少比较范围，真实算法和节点规模仍需测量。

章节练习

练习 1

缓存的搜索页离开后仍轮询，返回又产生双订阅，如何改造？

展开检查点
  • 激活启动、停用暂停并幂等，最终卸载释放。
  • 恢复时校验游标与用户，缺口时快照加增量协议。
  • 异步 watcher 清理尽早登记，迟到 success/error 均失效。
相关题目：F24F28F30
练习 2

SSR 弹窗使用延迟水合与 Teleport defer，首次键盘操作失效且目标一秒后出现，如何解释？

展开检查点
  • defer 只解决同 tick 挂载目标，改为目标已就绪再渲染。
  • 关键操作提前水合，测键盘触发与事件重放。
  • 集中 DOM 测量，检验焦点栈、模板编译优化及真实交互成本。
相关题目：F08F25F27F29

参考来源与核验边界

主体为 Vue 3；toValue 为 3.3+，onWatcherCleanup、Teleport defer、异步组件延迟水合为 3.5+。按实际编译器与 SSR 框架验证生成代码、加载和水合策略。

内容版本：2026-10-04.2 · 题目和来源 ID 保持原样，本站不将面经标签解释为企业官方出题或高频保证。