Question

Vue 2.x

在 Vue 2 中，在 v-for 中使用的 ref attribute 会用 ref 数组填充相应的 $refs property

<template>
	<div v-for="item in list" ref="setItemRef"></div>
<template>
<script>
  export default {
    methods: {
      ItemRef() {
        console.log(this.$refs.setItemRef); // [div, div, div, ...]
      }
    }
  }
</script>

Vue 3.x

在 Vue 3 中，此类用法将不再自动创建 $ref 数组。要从单个绑定获取多个 ref，将 ref 绑定到函数上

注意：

• itemRefs 不必是数组：它也可以是一个对象，其 ref 可以通过迭代的 key 被设置。
• 如有需要， itemRefs 也可以是响应式的，且可以被侦听。

<template>
	<div v-for="item in list" :ref="setItemRef"></div>
<template>

<!-- 结合选项式 API -->
<script>
	export default {
  data() {
    return {
      itemRefs: []
    }
  },
  methods: {
    setItemRef(el) {
      if (el) {
        this.itemRefs.push(el)
      }
    }
  },
  beforeUpdate() {
    this.itemRefs = []
  },
  updated() {
    console.log(this.itemRefs) // Proxy {0: div, 1: div, .....}
  }
}
</script>

<!-- 结合组合式 AP -->
import { onBeforeUpdate, onUpdated } from 'vue'

export default {
  setup() {
    let itemRefs = []
    const setItemRef = el => {
      if (el) {
        itemRefs.push(el)
      }
    }
    onBeforeUpdate(() => {
      itemRefs = []
    })
    onUpdated(() => {
      console.log(itemRefs)
    })
    return {
      setItemRef
    }
  }
}