vue3 组合式 API 在 onMounted 中调用 dom 报错 Initialize failed: invalid dom.

问题

在开发的过程中，项目中需要用到 echarts，引入后在渲染的过程中报错了：Initialize failed: invalid dom.
这个报错表示元素在未渲染完成的情况下就被调用了，作者在以前也遇到过这种情况，在 vue2 中正常来说将 echarts 图表渲染操作放到 mounted 或者 $nextTick 函数中就可以了。但是在 vue3 的项目中作者已经将图标渲染的操作放入 onMounted 中执行，可是还是报这个错误。

解决方法

在放入 onMounted 执行的条件下，再将图表操作放入 nextTick 函数中，代码如下：

<template>
	<div ref="dataChart" class="data-chart"></div>
</template>

<script setup lang="ts">
	import { ref, onMounted, nextTick } from "vue";

	let dataChart = ref()
	
	onMounted(() => {
		nextTick(() => { //将图表操作放入nextTick中
			initChart()
		})
	})

	const initChart = () => { 
		var myChart = (echarts as any).init(dataChart.value);
		var option = {
			...
		};
		myChart.setOption(option);
	}
</script>

觉得有帮助的朋友可以支持下作者哦，您的鼓励是我创作的最大动力，如有开发问题可联系作者