Vue含Canvas组件切换异常求助：v-if切换后Canvas状态未更新

嘿，这个问题我之前踩过坑！核心原因是Vue的DOM复用机制在搞鬼——当你用v-if切换的组件根元素类型相同（比如都是<canvas>）时，Vue会默认复用这个DOM节点来优化性能，而不是销毁旧组件实例、创建全新的。这就导致原来的"red"组件的事件监听和绘图状态还挂在这个节点上，哪怕DOM看起来已经切换到了canvas2，实际运行的还是旧实例的逻辑，所以绘图颜色依然是红色。

下面给你两个关键的解决步骤，配合代码示例：

1. 给切换的组件添加唯一key属性 #

通过key告诉Vue这是两个完全独立的组件实例，强制它在切换时销毁旧实例、创建新实例，而不是复用DOM。

<template>
  <div class="container-fluid">
    <!-- 给每个组件绑定唯一的key，避免DOM复用 -->
    <CanvasRed v-if="activeComponent === 'red'" key="red-canvas" />
    <CanvasBlue v-if="activeComponent === 'blue'" key="blue-canvas" />
    
    <button @click="activeComponent = 'red'">切换到红色画布</button>
    <button @click="activeComponent = 'blue'">切换到蓝色画布</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import CanvasRed from './CanvasRed.vue';
import CanvasBlue from './CanvasBlue.vue';

const activeComponent = ref('red');
</script>

如果你的两个画布是同一个组件只是传不同color属性，也可以直接用属性值作为key：

<CanvasComponent 
  v-if="selectedColor" 
  :color="selectedColor" 
  :key="selectedColor" 
/>

2. 在组件销毁时清理事件监听和状态 #

哪怕加了key，养成在组件销毁时清理绘图相关事件的习惯也很重要，能避免内存泄漏和残留状态影响其他组件。

以单个Canvas组件为例：

<template>
  <canvas ref="canvasRef" style="border: 1px solid #333;"></canvas>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

const props = defineProps({
  color: {
    type: String,
    required: true
  }
});

const canvasRef = ref(null);
let ctx = null;
let isDrawing = false;

// 绘图逻辑
const startDraw = (e) => {
  isDrawing = true;
  ctx.beginPath();
  ctx.moveTo(e.offsetX, e.offsetY);
};

const drawLine = (e) => {
  if (!isDrawing) return;
  ctx.strokeStyle = props.color;
  ctx.lineWidth = 3;
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
};

const stopDraw = () => {
  isDrawing = false;
};

onMounted(() => {
  const canvas = canvasRef.value;
  ctx = canvas.getContext('2d');
  // 绑定事件监听
  canvas.addEventListener('mousedown', startDraw);
  canvas.addEventListener('mousemove', drawLine);
  canvas.addEventListener('mouseup', stopDraw);
  canvas.addEventListener('mouseout', stopDraw);
});

onBeforeUnmount(() => {
  const canvas = canvasRef.value;
  // 移除所有事件监听，清理状态
  canvas.removeEventListener('mousedown', startDraw);
  canvas.removeEventListener('mousemove', drawLine);
  canvas.removeEventListener('mouseup', stopDraw);
  canvas.removeEventListener('mouseout', stopDraw);
  ctx = null;
  isDrawing = false;
});
</script>

做完这两步，切换组件时就能彻底销毁旧实例的状态和事件，新组件会用自己的颜色属性正常绘图了。

内容的提问来源于stack exchange，提问作者user7447942