v-for 中的 Ref 数组

breaking

在 Vue 2 中，在 v-for 里使用的 ref attribute 会用 ref 数组填充相应的 $refs property。当存在嵌套的 v-for 时，这种行为会变得不明确且效率低下。

在 Vue 3 中，这样的用法将不再在 $ref 中自动创建数组。要从单个绑定获取多个 ref，请将 ref 绑定到一个更灵活的函数上 (这是一个新特性)：

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

结合选项式 API:

  1. export default {
  2.   data() {
  3.     return {
  4.       itemRefs: []
  5.     }
  6.   },
  7.   methods: {
  8.     setItemRef(el) {
  9.       this.itemRefs.push(el)
  10.     }
  11.   },
  12.   beforeUpdate() {
  13.     this.itemRefs = []
  14.   },
  15.   updated() {
  16.     console.log(this.itemRefs)
  17.   }
  18. }

结合组合式 API:

  1. import { ref, onBeforeUpdate, onUpdated } from 'vue'
  3. export default {
  4.   setup() {
  5.     let itemRefs = []
  6.     const setItemRef = el => {
  7.       itemRefs.push(el)
  8.     }
  9.     onBeforeUpdate(() => {
  10.       itemRefs = []
  11.     })
  12.     onUpdated(() => {
  13.       console.log(itemRefs)
  14.     })
  15.     return {
  16.       itemRefs,
  17.       setItemRef
  18.     }
  19.   }
  20. }

注意：

  • itemRefs 不必是数组：它也可以是一个对象，其 ref 会通过迭代的 key 被设置。

  • 如果需要，itemRef 也可以是响应式的且可以被监听。