Vue.js中如何在<canvas>元素（重新）添加到DOM时触发函数？

嘿，这个需求我太熟了！Vue里处理这种动态渲染的DOM元素（比如你的canvas），要在它重新出现在页面时触发绘制，有几个非常靠谱的办法，我给你一一拆解：

方法1：拆分子组件，用生命周期钩子（最推荐） #

把canvas单独封装成一个子组件是最符合Vue组件化思想的做法，因为每次sample从false切换到true时，子组件会重新挂载，这时mounted钩子就会自动触发，刚好用来执行绘制逻辑：

<!-- 子组件：CanvasDrawer.vue -->
<template>
  <canvas ref="drawCanvas"></canvas>
</template>

<script>
export default {
  mounted() {
    // 组件挂载完成，立刻执行绘制
    this.renderCanvas();
  },
  methods: {
    renderCanvas() {
      const canvas = this.$refs.drawCanvas;
      if (!canvas) return;
      const ctx = canvas.getContext('2d');
      
      // 这里写你的绘制逻辑，举个例子：画个红色矩形
      ctx.fillStyle = '#ff4444';
      ctx.fillRect(15, 15, 60, 60);
    }
  }
}
</script>

然后在父组件里用v-if控制这个子组件的显示：

<template>
  <div class="article" v-if="displayArticle">
    <!-- 每次sample变为true，子组件就会重新挂载，触发绘制 -->
    <CanvasDrawer v-if="sample" />
  </div>
</template>

<script>
import CanvasDrawer from './CanvasDrawer.vue';

export default {
  components: { CanvasDrawer },
  data() {
    return {
      displayArticle: true,
      sample: false
    }
  }
}
</script>

这种方式代码结构清晰，而且子组件可以复用，后期维护也方便。

方法2：监听sample变量，结合$nextTick（适合不拆组件的场景） #

如果你不想单独拆组件，直接在父组件里监听sample的变化，等DOM更新完成后再操作canvas也可以：

<template>
  <div class="article" v-if="displayArticle">
    <div v-if="sample">
      <canvas ref="myCanvas"></canvas>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      displayArticle: true,
      sample: false
    }
  },
  watch: {
    sample(newValue) {
      // 只有当sample变为true时才执行
      if (newValue) {
        // 用$nextTick确保canvas已经被插入到DOM中，能拿到元素
        this.$nextTick(() => {
          this.drawOnCanvas();
        });
      }
    }
  },
  methods: {
    drawOnCanvas() {
      const canvas = this.$refs.myCanvas;
      if (!canvas) return;
      const ctx = canvas.getContext('2d');
      
      // 示例绘制：画个蓝色圆形
      ctx.beginPath();
      ctx.arc(50, 50, 35, 0, Math.PI * 2);
      ctx.fillStyle = '#33b5e5';
      ctx.fill();
    }
  }
}
</script>

方法3：自定义指令（适合多处复用的场景） #

如果你的项目里有多个地方需要这种“元素挂载后自动绘制”的逻辑，写个自定义指令就很方便：

<template>
  <div class="article" v-if="displayArticle">
    <div v-if="sample">
      <!-- 给canvas加上自定义指令，挂载时自动触发绘制 -->
      <canvas v-auto-draw></canvas>
    </div>
  </div>
</template>

<script>
export default {
  directives: {
    'auto-draw': {
      // inserted钩子会在元素被插入DOM时触发
      inserted(el) {
        const ctx = el.getContext('2d');
        
        // 示例绘制：绿色矩形
        ctx.fillStyle = '#99cc00';
        ctx.fillRect(20, 20, 50, 50);
      }
    }
  },
  data() {
    return {
      displayArticle: true,
      sample: false
    }
  }
}
</script>

总结一下：如果是单一场景，方法1或2都可以；如果要复用，方法3更高效。根据你的实际项目需求选就行~

内容的提问来源于stack exchange，提问作者John M.Scott