Vue渲染器将动画钩子深度集成至patch流程：insert在节点挂载后触发入场动画，remove需调用done()实现离场动画，postpatch用于props变更过渡；其运行于渲染器层，区别于组件生命周期钩子，且通过异步解耦与rAF保障帧率。
钩子如何被渲染器识别并触发
Vue 在生成 VNode 时，会检查节点 data 中是否携带 hook 对象（如 { hook: { insert() {}, remove() {} } }）。这些钩子不是用户直接调用的普通方法，而是由渲染器在特定 patch 阶段主动调用：
- insert：当新节点真实 DOM 已挂载、但父容器尚未完成 patch 时触发——此时元素已可见，适合启动入场动画
-
remove：在节点即将从 DOM 移除前触发，且必须显式调用
done()才继续卸载流程——为离场动画留出执行窗口 - postpatch：子节点 patch 完成后触发，适用于 props 变更引发的状态过渡（如颜色/尺寸渐变），此时 DOM 结构已稳定
与组件生命周期钩子的本质区别
动画钩子（insert/remove）运行在 渲染器层（renderer），属于 VNode 操作阶段；而 onMounted、onUpdated 等属于 组件实例层（component instance），绑定在组件挂载或响应式更新之后。
这意味着：
- 同一个组件内，
onMounted只触发一次，但insert可随 v-if/v-show 多次触发 -
remove能捕获v-if="false"的瞬时卸载，而onBeforeUnmount仅在组件整体销毁时生效 - 动画钩子可作用于任意 DOM 元素（包括非组件根节点），不受组件边界限制
调度机制：如何避免阻塞渲染流水线
渲染器不会等待动画钩子执行完毕才推进 patch 流程——它只保证钩子在正确时机被调用，并把控制权交还给开发者。关键设计有两处：
立即学习“前端免费学习笔记（深入）”；
-
异步解耦：例如
remove(el, done)中的done是渲染器提供的回调，动画库（如 anime.js 或原生el.animate()）需在其onfinish或then中调用done()，否则节点将卡在“待移除”状态 -
帧对齐保障：所有钩子调用均发生在
requestAnimationFrame帧内，确保动画起始与浏览器刷新节奏一致，避免掉帧
Vue 2 与 Vue 3 的集成差异
Vue 2 直接支持在指令定义中返回含 insert/remove 的钩子对象；Vue 3 则因渲染器模块化，需通过 createApp().use(...) 注册自定义渲染器拓展，或利用 renderer.createApp 配置底层行为。两者目标一致：让动画逻辑能穿透模板抽象，直达 DOM 更新决策点。
