vue 使用动态ref动态显示echarts图坑总结

需求

vue项目中动态给div赋予ref属性，以达到动态显示echarts图数量的目的。

坑

首先说下最开始的实现思路：

1. 在页面挂载的时候调用接口获取需要图形化展示的参数列表，以及展示图形的数量
2. 在接口数据接收完毕后调用画echarts图的方法

步骤并不复杂，但是其中涉及到了vue生命周期的坑，分析如下：

1. 我们是动态给div赋予ref的:

   也就是说我们在上边的第一步接收完接口的数据后，会根据接收到的count数量更新DOM内容。

   接下来如果立即执行画echarts图的方法，打印refs内容如下图所示，发现refs内容为空。

   此时我们需要使用this.$nextTick方法，在该方法中回调画echarts图的方法，该方法的作用就相当于延迟调用方法，在DOM更新的时候不会立即执行回调函数，在DOM更新完毕后会执行回调函数。这样我们就可以在画echarts图的方法中获取ref内容。
   

2. 当DOM更新完毕后在获取ref内容的时候不能使用this.$refs[refName]的方式获取，如下图此方式获取的是对应的ref后的数组，我们需要获取的是数组内的内容，所以要使用this.$refs[refName][0]的方式获取。
   

完整代码实现

效果图展示

动态显示echarts图数量和内容。