关于项目中，v-for 新建几个区块，ref 绑定的问题（记录）

最近在项目中遇到了一个问题，在此留下一个记录方便以后查找 项目主要用的还是vue3语法糖写的 <script lang="ts" setup></script>

类似于这种需求，区块是可以新增多个，这个时候 ref 绑定的值会有问题

// 最开始的时候是这样去写的
ref = "regionRef"

后来发现这样写，有问题。 拿不到后边的值，并且修改上边的值得时候，第二个区块的值也会跟着去改变

// 然后更改成这样
ref = "regionRef[index]"

// 但是会需要单独的定义很多多余的变量
// 项目中最多用五个，但是如果是十个 那就是噩梦级的，而且还会有~
const regionRef0=ref()
const regionRef1=ref()
const regionRef2=ref()
const regionRef3=ref()
const regionRef4=ref()

// 拿值的时候是这样的
switch(index){
 case 0:
  ref= regionRef0.value
  break
 case 1:
  ref= regionRef1.value
  break
 case 2:
  ref= regionRef2.value
  break
 case 3:
  ref= regionRef3.value
  break
 case 4:
  ref= regionRef4.value
  break
}

改成这样以后就可以单独获取到每一个区块的 ref了，修改的时候也能修改想对应的值，并且不会影响到别的区块中的值

开发的时候，这样写完完全全没有任何的问题，但是上线的时候痛苦就来了。 忘记截图了，不知道报了个啥错的。 线上环境的时候，完完全全的拿不到值。 瞬间抓狂的，本以为可以开开心心的上线，没想到，立马就 Bug 来了，愿你们的代码没有 bug

然后就开始愉快的修改 bug 环节，面向百度编程

还真找到了一种解决办法 就是用 vue提供的 函数模板引用

// 官网上的写法
<input :ref="(el) => { /* 将 el 赋值给一个数据属性或 ref 变量 */ }">

// 然后就把代码改成了
// 这里的 el 就是每一个 ref 获取到的值
:ref = " (el)=>{
   if(el) regionRef[index] = el
 } "

然后，嗯~，解决了这个问题，开开心心收拾小包包，下班咯！！