canvas v-if消失

### Vue 中 Canvas 元素使用 `v-if` 指令时消失的解决方案

在 Vue 应用程序中，当 `<canvas>` 元素受控于 `v-if` 指令时，可能会遇到该元素被移除并重新创建的情况。这通常发生在组件状态变化导致条件表达式的真假切换之时。由于 `v-if` 的工作方式是直接销毁和重建 DOM 节点及其关联的数据绑定，因此任何基于这些节点的操作（如初始化图表库）都需要特别处理。

对于 `canvas-confetti` 这样的依赖于 `<canvas>` 元素的功能模块，在首次渲染之后再次显示隐藏过的部分时，应当确保每次展示前都正确地重置或重新实例化相应的对象[^1]。具体来说：

- 当组件因 `v-if="condition"` 条件变为真而准备进入视图时，应该监听这个时机来触发必要的初始化逻辑；
- 使用生命周期钩子函数 `mounted()` 或者组合 API 形式的 `onMounted(() => {})` 可以有效地捕捉到组件挂载完成的时间点，并在此处调用 confetti 初始化方法；
- 同样重要的是考虑如何清理资源以及何时进行清理——即当组件因为 `v-if` 表达式求值为假即将离开DOM树之前，利用 `beforeDestroy()` 钩子释放已分配给 Confetti 实例化的内存空间或其他外部连接；

下面是一个简单的例子展示了上述思路的应用：

<template>
  <div v-if="isVisible">
    <canvas ref="confettiCanvas"></canvas>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref } from 'vue';
// 假设这是引入 canvas-confetti 的方式
import * as confetti from 'canvas-confetti';

const isVisible = ref(false);
let animationInstance;

onMounted(() => {
  const canvasElement = document.querySelector('canvas');
  
  if (canvasElement) {
    // 创建新的动画实例
    animationInstance = confetti.create(canvasElement);

    // 执行一些初始配置...
    animationInstance({
      particleCount: 100,
      spread: 70,
      origin: { y: 0.6 }
    });
  }
});

onBeforeUnmount(() => {
  // 清理操作
  if (animationInstance && typeof animationInstance.reset === "function") {
    animationInstance.reset();
  }
});
</script>

为了防止频繁切换引起的问题，还可以采用延迟加载策略，仅在实际需要的时候才去获取和设置画布上的内容。另外一种常见的做法是在父级容器上应用样式属性 `{ display: none; visibility: hidden; }` 替代 `v-if` 达成相似效果而不必担心丢失内部状态。