vue3 v-for动态绑定ref问题

Question

如下的遍历数组生成元素

<div v-for="element in childApp" :key="element.key" class="appWrap" :ref="setChildAppRef">
{{element.content}}
    </div>

在setup中可以收集到到元素的ref引入，但是当childApp变化时如删除，新增，childAppRefs会push重复的元素。

<script setup>
let childAppRefs = []
let childApp = computed(() => store.state.childApp)
const setChildAppRef = (el) => {
  if (el) {
    childAppRefs.push(el)
  }
}
</script>

例如

let childApp = [{key: 'key1', content: ''}, {key: 'key2, content: ''}]

删除一个元素后

let childApp = [{key: 'key1', content: ''},]

childAppRefs中会有3个元素，请问这个怎么解决?保证childAppRefs元素的正确

Answer 1

删不掉。

不过不一定非得用数组，你也可以用个对象来装，以索引为 Key、然后过滤掉比数据源数组长度还大的那些 Key：

<child v-for="(item, index) in list" :ref="el => setChildRef(el, index)" />

<script setup>
// 你也可以抽成一个 hooks，用起来更方便
const childRefs = {}
const computedChildRefs = computed(() => {
  return Object.entries(childRefs)
    .filter(([index, ref]) => +index < list.length && !!ref)
    .map(([_, ref]) => ref)
})
const setChildRef = (el, index) => {
  childRefs[index] = el
}
</script>

---

如果你要不是非得用 setup 的话，也可以设置一个同一的前缀，然后遍历 this.$refs：

<child v-for="(item, index) in list" :ref="'my-ref-prefix-' + index" />

<script>
export default {
  methods: {
    foo() {
      const keys = Object.keys(this.$refs).filter((key) => key.startsWith('my-ref-prefix-'))
      keys.forEach((key) => console.log(this.$refs[key]))
    }
  }
}
</script>

---

P.S. 官方文档上给的示例是在 onBeforeUpdate 钩子里清空 ref 数组，但这种方法是有坑的，自己写写看就知道了。