Vue.js vuejs中未定义此.$refs.canvas

我正在使用

vuejs3

和

canvas

设置一个新项目，但我被困在

canvas

元素中。有人能给我一些建议或想法吗

在我的项目中，我得到了

未定义的
和
这个。$refs.canvas
。另外，当我使用
document.getElementById（'canvas'）
时，我会得到
null

<template>
  <div id="app">
    <canvas
      ref="canvas"
      id="canvas"
      class="bg"
      width="400"
      height="400"></canvas>
  </div>
</template>

<script>

export default {
  name: 'app',
  data() {
    return {
    }
  },
  created() {
    // const canvas = this.$refs.canvas.getContext('2d') 
    const canvas = document.getElementById('canvas')
    console.log(canvas)
  },
}
</script>


导出默认值{
名称：“应用程序”，
数据（）{
返回{
}
},
创建（）{
//const canvas=this.$refs.canvas.getContext（'2d'）
const canvas=document.getElementById（'canvas'）
console.log（画布）
},
}

如果有人能给我一些帮助，我们将不胜感激。
元素将不会在创建的
中呈现。尝试安装

<template>
  <div id="app">
    <canvas
      ref="canvas"
      id="canvas"
      class="bg"
      width="400"
      height="400"></canvas>
  </div>
</template>

<script>

export default {
  name: 'app',
  data() {
    return {
    }
  },
  mounted() {
    const canvas = this.$refs.canvas.getContext('2d') 
    console.log(canvas)
  },
}
</script>


导出默认值{
名称：“应用程序”，
数据（）{
返回{
}
},
安装的（）{
const canvas=this.$refs.canvas.getContext（'2d'）
console.log（画布）
},
}

在此处查看生命周期图：
元素将不会在
创建的
中呈现。尝试安装

<template>
  <div id="app">
    <canvas
      ref="canvas"
      id="canvas"
      class="bg"
      width="400"
      height="400"></canvas>
  </div>
</template>

<script>

export default {
  name: 'app',
  data() {
    return {
    }
  },
  mounted() {
    const canvas = this.$refs.canvas.getContext('2d') 
    console.log(canvas)
  },
}
</script>


导出默认值{
名称：“应用程序”，
数据（）{
返回{
}
},
安装的（）{
const canvas=this.$refs.canvas.getContext（'2d'）
console.log（画布）
},
}

在此处查看生命周期图：
您是否尝试过使用
mounted
方法访问它？元素尚未在创建的
中呈现。您是否尝试过在装载的
方法中访问它？这些元素还不会在
created
@Veexyy中呈现。别担心，在这个领域里，还有很多东西需要学习；）@Veexy别担心，在这个领域还有很多东西要学；）