(二)vue3之v-for Array Refs

1.简介

在vue2中，v-for绑定$refs将会自动生成一个refs的数组，但是在v-for中这种行为将会变得有歧义和不高效。
而在vue3中，这种用法就不会生效，因为vue3不会自动生成refs的数组。如果我们需要拿到多个的refs组成的数组，那么就需要使用函数的方式手动去绑定。

2.vue2中的用法

<template>
  <div>
    <ul>
      <!-- 绑定ref -->
      <li v-for="(item, index) in list" :key="index" ref="liRef">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      list: [1, 2, 3],
    };
  },
  components: {},
  mounted() {
    console.log("ref:", this.$refs.liRef);
  },
};
</script>

打印出来的结果如下：

我们可以看到，在vue2中会自动生成refs数组。

3.vue3中的用法

如果我们还是使用vue2中的用法，将会得到如下结果：

这时我们可以看到，vue3并不会自动帮我们生成refs数组，只能得到最后一个元素的ref。如果我们需要在v-for中绑定ref并生成refs数组，则需要使用函数的方式手动绑定，用法如下：

<template>
  <div>
    <ul>
      <!-- 绑定ref -->
      <li v-for="(item, index) in list" :key="index" :ref="setItemRef">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      list: [1, 2, 3],
      itemRefs: [],
    };
  },
  methods: {
    setItemRef(el) {
      this.itemRefs.push(el);
    },
  },
  beforeUpdate() {
    this.itemRefs = [];
  },
  mounted() {
    console.log("ref:", this.itemRefs);
  },
  updated() {
    // console.log(this.itemRefs);
  },
};
</script>

从代码中我们可以看到，ref绑定的是一个setItemRef函数，而setItemRef做的事情就是el push到itemRefs数组中，打印的结果如下：

现在的到的结果和vue2中的是相似的。

4.vue3 Array Refs的新特性

现在的itemRefs不一定是一个数组，它也可以是一个对象。

setItemRef(el) {
  // this.itemRefs.push(el);
  // data中的itemRefs需要定义为对象
  let index = parseInt(Math.random(1) * 1000);
  this.itemRefs[index] = el;
},

通过这样简单的实例改写方式，可以将itemRefs定义为一个对象。