vue3中如何使用ref动态绑定dom元素

• 为什么要把dom元素放到一个对象里，而且还用不同key来存储？
  • 比如我们通过v-for遍历了20个input输入框，我们需要准确的通过加或者减来控制input框里的数值，此时我们就需要通过一个唯一的值来确定到底需要修改哪个input框
  • 通过唯一的key来存放dom元素是为了防止获取dom元素时顺序不一致导致最终操作出现偏差，本来要修改第一个input但是却修改了第二个或者第三个

<script setup lang='ts'>
import { onMounted, ref } from 'vue'

const li = ref<{ [key: number]: HTMLElement }>({})

const setRef = (el: HTMLElement, item: number) => {
  if (el) {
    li.value[item] = el
  }
}
onMounted(() => {
  for (const item in li.value) {
    console.log(li.value[item])
  }
})
</script>

<template>
  <div class='login'>
    <ul>
      <li v-for='item of 10' :ref='(el)=>setRef(el,item)' :key='item'>{{ item }}</li>
    </ul>
  </div>
</template>

<style scoped lang='less'></style>