Vue3 迁移策略笔记——【1】v-for 中的 Ref 数组

在 vue2 中，在 v-for 语句中使用 ref 属性时，会自动生成 refs 数组插入到 $refs 属性中

<template>
  <div class="hello">
    <div v-for="item in 5" :key="item" :ref="item">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  mounted(){
    console.log(this.$refs,'在 vue2 中')
  }
}
</script>

当遇到嵌套使用 v-for 的情况时，会生成一个多维的数组，此时在逻辑处理时会变得复杂且低效

<template>
  <div class="hello">
    <div v-for="item in 5" :key="item" :ref="item">
      <div v-for="items in 5" :key="items" :ref="items">
        {{ item }} - {{ items }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted(){
    console.log(this.$refs,'在嵌套 vue2 中')
  }
}
</script>

vue3 则会解决这两个问题：
【1】不能方便的逻辑处理 ——将 ref 绑定到一个 function 中，在 function 中可以灵活处理
【2】多维数组——平铺为一个简单普通的一维数组

<template>
  <div>
	<div>
	  <div v-for="item in 5" :key="item" :ref="setItemRef">
		<div v-for="items in 5" :key="items" :ref="setItemRef">
          {{ item }} - {{ items }}
        </div>
	  </div>
	  <button @click="print">点击</button>
	</div>
  </div>
</template>
<script>
export default {
  setup() {
    let itemRefs = []
    const setItemRef = el => {
      if (el) {
        itemRefs.push(el)
      }
    }
    const print=()=>{
      console.log(itemRefs,'在嵌套 vue3 中')
    }
    return {
      setItemRef,
      print
    }
  }
}
</script>

[注意]

• itemRefs 不强制要求是数组，也可以是对象；
• 如有必要，itemRef 也可以是响应式的且可以被监听。