Vue.js导入原生JavaScript类对象报错：element未定义

问题原因 #

错误根源在World类构造函数的this.element = element.config语句：

• 这里的element是未定义的变量，你实际要访问的是传入构造函数的config对象中的element属性，代码逻辑写反了，应该是config.element而非element.config。
• 额外补充一个潜在问题：this.element.getElementById('game__canvas')写法错误，getElementById是document对象的专属方法，DOM元素实例没有这个方法，需改用querySelector('#game__canvas')或者直接调用document.getElementById。

修改方案 #

1. 修正World类的构造函数 #

export default class World {
    constructor(config) {
        // 修正：正确读取传入的config对象中的element属性
        this.element = config.element;
        // 修正：用querySelector获取容器内的canvas元素
        this.canvas = this.element.querySelector('#game__canvas');
        this.ctx = this.canvas.getContext('2d');
    }

    init() {
        console.log('Hi! It is working!', this);
    }
}

2. Vue调用优化（可选但推荐） #

Vue项目中尽量避免直接使用document.querySelector，改用$refs更符合框架规范，也能规避DOM选择的潜在问题：

模板部分：

<template>
  <div ref="gameContainer">
    <canvas id="game__canvas"></canvas>
  </div>
</template>

脚本部分：

import World from './World'

export default {
  mounted() {
    this.updateGame()
  },
  methods: {
    updateGame() {
      const world = new World({
        // 使用$refs获取目标DOM元素
        element: this.$refs.gameContainer
      })
      world.init()
    }
  }
}

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