如何利用渲染函数实现带动画的列表删除效果？Patch 钩子实战应用-Vue.js-PHP中文网

关键在于利用 vue 的 remove 钩子触发退出动画：在钩子中添加 css 类、监听 transitionend 后调用 rm()，配合唯一 key 和响应式数据更新确保正确 patch。

如何利用渲染函数实现带动画的列表删除效果？patch 钩子实战应用

要实现带动画的列表删除效果，关键不是直接从 DOM 中移除元素，而是让 Vue 知道“这个节点即将消失”，从而触发过渡动画。渲染函数中没有 v-if 或 <transition-group></transition-group> 模板语法，必须手动控制 vnode 的生命周期，而 patch 钩子（更准确地说，是 insert、remove 和 update 钩子）正是介入这一过程的核心机制。

理解 remove 钩子：删除前的最后机会

remove 钩子在 vnode 即将被卸载时调用，此时真实 DOM 元素仍存在，但 Vue 已决定将其移除。这是启动退出动画的黄金时机——你可以在钩子中阻止立即删除，等待 CSS 动画或 JS 动画完成后再真正移除。

钩子接收两个参数：vnode（当前 vnode）和 rm（一个必须调用的回调函数，表示“现在可以安全删除了”）
不能直接操作 vnode.el 的样式而不调用 rm，否则会内存泄漏或状态不一致
典型做法：给元素添加退出 class → 监听 transitionend → 在事件回调里调用 rm()

在 render 函数中为列表项注入 remove 钩子

每个待删除的列表项 vnode 都需配置 hook: { remove }。注意：该钩子只对有真实 DOM 元素的 vnode 生效（即组件根节点或普通元素 vnode）。

示例（简化版）：

render(h) {
  return h('ul', this.list.map((item, i) => {
    return h('li', {
      key: item.id,
      // 关键：为每个 li 注入 remove 钩子
      hook: {
        remove: (vnode, rm) => {
          const el = vnode.elm;
          el.classList.add('fade-out');
          el.addEventListener('transitionend', () => {
            el.classList.remove('fade-out');
            rm(); // 真正卸载
          }, { once: true });
        }
      }
    }, item.text);
  }));
}

CSS 配合（确保有过渡属性）：

.fade-out {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.3s, transform 0.3s;
}

配合数据更新与 key 机制确保正确 patch

动画生效的前提是 Vue 能精准识别哪些节点要进入/离开。这依赖两点：

唯一且稳定 key：每个列表项必须用不会复用的 key（如 item.id），避免因 key 相同导致就地复用，跳过 remove 流程
响应式数据驱动更新：删除动作应通过修改响应式数组（如 this.list.splice(index, 1)）触发 re-render，Vue 才会比对新旧 vnode 并调用对应钩子
不要手动调用 vm.$forceUpdate()，它绕过 diff，可能导致钩子不触发