问题记录:Vue3中无法调用Echart方法

848 阅读1分钟

问题复现

以下代码在Vue2中可以正常执行

import echarts from 'echarts'
export default {
  data () {
    return {
      echart: null
    }
  },
  mounted () {
    this.echart = echarts.init(this.$refs.dom)
  },
  methods: {
    resize () {
      this.dom.resize()
    }
  },
}

但在Vue3中报错

image.png

原因

由于vue3对变量进行代理,Echart未能获取到“echart”的内部变量。即使在变量前加入下划线"_",vue3也会进行代理(vue2不会)。

解决方案

不在data中定义“echart”或使用shallowRef

参考

github.com/apache/echa…