在Vue的世界里，状态切换总是伴随着动画的展现，但有时候，这些动画与组件的显示/隐藏逻辑并不完全同步，导致视觉上的突兀或布局错乱。今天，我要给大家介绍一个神奇的Vue插件——useDelayedRender，它就像一位优雅的指挥家，让动画与状态切换能够和谐共舞。

一、什么是useDelayedRender？

useDelayedRender是一个Vue的Composition API Hook，它的主要作用是处理带有过渡状态的异步渲染逻辑。简单来说，它可以让你的组件在状态切换时，先显示一个中间状态，然后再进行真正的渲染，从而避免动画被突然打断。

二、useDelayedRender的核心功能

1. 监听状态变化：它会监听你设置的indicator（是否显示）的变化，并在nextTick后决定是否更新intermediateIndicator（中间过渡状态）。
2. 生命周期钩子：支持beforeShow、afterShow、beforeHide和afterHide四个生命周期钩子，让你可以在状态切换的不同阶段执行自定义逻辑。
3. 自定义中间状态：通过shouldSetIntermediate函数，你可以灵活地控制是否需要设置中间状态，从而优化渲染性能。

三、使用示例

1. 模态框（Modal）延迟渲染

在模态框组件中，我们希望显示时先触发beforeShow动画，然后再渲染组件；隐藏时先触发beforeHide动画，再从DOM中移除。使用useDelayedRender，我们可以轻松实现这一效果：

<template>
  <button @click="toggleModal">切换模态框</button>
  <div v-if="showIntermediate" class="modal" :class="{ show: showModal }">
    <p>模态框内容</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useDelayedRender } from "./useDelayedRender";

const showModal = ref(false);
const showIntermediate = ref(false);

const toggleModal = () => (showModal.value = !showModal.value);

useDelayedRender({
  indicator: showModal,
  intermediateIndicator: showIntermediate,
  beforeShow: () => console.log("即将显示"),
  afterShow: () => console.log("已经显示"),
  beforeHide: () => console.log("即将隐藏"),
  afterHide: () => console.log("已经隐藏"),
});
</script>

<style>
.modal {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.modal.show {
  opacity: 1;
  transform: translateY(0);
}
</style>

2. 折叠面板（Accordion）延迟渲染

折叠面板组件（如手风琴菜单）也需要延迟渲染，否则展开动画可能无法生效。使用useDelayedRender，我们可以让折叠面板的展开和收起动画更加流畅：

<template>
  <button @click="toggle">切换折叠</button>
  <div v-if="showIntermediate" class="content" :class="{ expand: isExpanded }">
    <p>展开的内容</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useDelayedRender } from "./useDelayedRender";

const isExpanded = ref(false);
const showIntermediate = ref(false);

const toggle = () => (isExpanded.value = !isExpanded.value);

useDelayedRender({
  indicator: isExpanded,
  intermediateIndicator: showIntermediate,
  shouldSetIntermediate: (step) => step === "show", // 只在展开时渲染
});
</script>

<style>
.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.content.expand {
  max-height: 100px;
}
</style>

四、总结

useDelayedRender的核心作用在于控制组件的显示/隐藏逻辑，避免v-if直接切换导致动画丢失。它支持生命周期钩子，可用于动画、异步请求等操作，优化渲染性能，避免不必要的DOM操作。如果你正在开发Vue项目，特别是涉及动态渲染和动画的场景，这个插件绝对值得一试！