vue里动态设置并获取ref

今天来讲一个一直以来总是被我忽略的知识点，关于vue里的ref。需求是这样的：

在页面初次渲染的时候动态生成这样一个饼图列表，我用的是echarts，大家都知道echarts的每一个chart都是要绑定到单独的id里去，那么在vue里，肯定用的是ref。

在下愚钝，之前总以为ref一定要是唯一的，这也怪自己很少看文档，所以想着怎么样给每一个li都加上单独的ref，自然而然的就想到了利用li的index：

<ul class="section__content">
    <li
        class="asset-pie-chart"
        v-for="(item,index) in deviationCharts"
        :key="index"
        :ref="deviationChart+'index'"
        ></li>
</ul>

然后在数组的循环里动态获取每一个ref。

看上去似乎没毛病吧。

然后发现没用，获取不到ref元素。

调试后，发现两个问题：

1. 第一，获取ref一定要注意是在dom元素生成之后，否则获取到的是undefined，或者报没有“getAtrribute”方法的错误，解决办法是使用$nextTick。
2. 没必要给循环列表的每一个元素加上不一样的ref，而只用给他们都加上一样的ref，根据此ref获取到的是一个数组列表，然后根据index即可定位该元素，例子如下：

        this.$nextTick(() => {
          console.log(this.$refs.deviationCharts);
            //deviationCharts为统一ref
          let deviationChart = echarts.init(this.$refs.deviationCharts[index]);
          deviationChart.setOption(option);
          deviationChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: 0
          }); //设置默认选中高亮部分
        });