vue中在一个页面复用同一个echarts写的组件不能显示的问题，使用ref解决问题及原理分析

1.问题：前端vue创建echarts相关组件之后，不能在同一个页面进行多次引入，只能正常显示第一个引入的问题。

2.解决办法：将id命名的dom元素改为ref方式。但是自己代码又不能直接用this,this.$ref情况。

（可以用this这种情况的请移步直接用this.$ref情况）

①在id后面加一个ref 标记，用ref来获取div容器。

②再创建一个 Vue 3 的响应式引用 perChart ，其初始值为 null，将自动与上面模板的dom元素关联起来。

//创建一个ref
const perChart = ref(null)

③最后直接用.value获取到该dom元素

 let myChart = echarts.init(perChart.value)

3.完整代码展示

4.简单原理解释

1).在Vue 3中，ref 是一个函数，用于创建一个响应式引用。当你使用 ref 创建一个引用时，它将返回一个带有 .value 属性的响应式对象，该属性可以用于访问引用的值。

2).所以，const perChart = ref(null) 这行代码的意思是创建了一个名为 perChart 的引用，并将其初始值设置为 null。

本质：当组件渲染时，Vue 会自动将 perChart的值更新为

元素的引用。这就实现了将 Vue 3 的响应式引用与特定的 DOM 元素关联起来。

3).问题：那如果有多个ref，你怎么知道取哪个dom元素？

回答：按顺序依次关联，在 Vue 3 中，当你创建 ref 并将其应用到多个元素时，Vue 会根据 ref 的创建顺序依次将这些元素与对应的 ref 关联起来。

所以：在下面的代码中，element1Ref 首先被创建，然后是 element2Ref。因此，当你在模板中使用 ref="element1" 时，它会将该 ref 与第一个元素关联起来；当你在模板中使用 ref="element2" 时，它会将该 ref 与第二个元素关联起来。