在Vuetify中如何用Vue访问当前模板组件，插入Three.js渲染内容

当前Vuetify组件模板如下：

<template>
  <h1>View in 3D</h1>
</template>

脚本代码：

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

目前渲染器元素会被追加到页面body中，希望将其插入到当前组件的模板内部，请问如何通过Vue访问当前组件对应的DOM容器？

解决方法 #

要实现这个需求，核心是利用Vue的ref引用获取组件内的DOM元素，具体步骤如下：

• 在组件模板中添加一个用于承载渲染器的容器元素，并通过ref属性标记它：

  <template>
    <div>
      <h1>View in 3D</h1>
      <!-- 渲染器容器 -->
      <div ref="renderContainer"></div>
    </div>
  </template>
  

• 在Vue组件的mounted生命周期钩子中操作DOM（此时组件DOM已完成渲染，能正确获取到ref对应的元素），将THREE渲染器的DOM元素追加到这个容器内：

  export default {
    mounted() {
      // 初始化渲染器
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      // 通过$refs获取组件内的容器元素，插入渲染器
      this.$refs.renderContainer.appendChild(renderer.domElement);
    }
  }
  

• 额外提示：如果需要响应窗口大小变化，可以在mounted中添加窗口resize监听，调整渲染器尺寸；在beforeUnmount中移除监听并销毁渲染器，避免内存泄漏。

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