javascript - 如何将这段 CodePen 代码集成到 Vue 中？

Question

我正在尝试在 Vue 中实现此 ( https://codepen.io/iprodev/pen/azpWBr)。我该怎么做？

我试过这样实现

<template>
    <div>
        <canvas height="100" id="confetti" width="100"></canvas>
     </div>
</template>

<script>
    export default {
        created () {
            // JS code from codepen
        }
    }
</script>

Answer 1

当然，这是可行的。您需要做一些事情。 Codepen 片段中的所有代码都包含在 DOMContentLoaded 事件处理程序中，因为您需要访问实际的 DOM 树。使用 Vue，您不能使用此事件，因为 Vue 应用程序是 SPA，加载的事件将在您的实际 View 呈现之前触发。

在这种情况下，您应该使用组件的mounted 事件而不是created 生命周期事件。 mounted 确保组件的 DOM 实际上附加到主文档。

此外，您将需要访问实际的 HTMLCanvasElement。您的 Vue.js $refs 不是通过 ID 定位它，而是像这样构造:

<canvas ref="confetti" height="100" width="100"></canvas>

在您的组件中，您可以通过以下方式访问 DOM 元素:

mounted() {
    this.$refs.confetti // Reference to HTMLCanvasElement
}

这就是避免在 Vue.js 中使用全局 id 属性的方法。现在剩下的代码就是您希望如何在组件中组织它。您可以将 Canvas 渲染逻辑抽象到一个单独的模块中并传递 Canvas 元素，或者这些方法可以成为 Vue 实例的一部分。

第三次也是最后一次。 window 对象上分配了几个事件处理程序，例如 resize。您必须确保在组件被销毁时清理它们。如果不这样做，那么即使组件被销毁，这些事件也会继续触发处理程序。为此，请使用 Vue 提供的 beforeDestroy 生命周期事件。清理所有全局注册的事件处理程序。