动态v-for场景下函数式模板refs产生null值的彻底清理方法问询

这个问题我之前也踩过坑，核心是Vue的列表diff逻辑和ref数组的自动管理规则没搞对，咱们一步步拆解解决：

为啥会出现null值？ #

1. 无效的key导致diff混乱：你的v-for用了:key="filter.id"，但新增筛选器时根本没给filter生成唯一ID，等于没设置有效的key——Vue会默认用索引当key，这会让它在删除元素时错误地复用DOM节点，导致ref引用的更新完全乱套。
2. 手动用索引管理ref数组的错误：你通过itemRefs[idx] = input手动赋值，当元素被删除时，Vue会触发对应索引的ref回调传入null，但不会自动缩短数组长度，所以那个位置就留下了null；而itemRefs.pop()只能删最后一项，跟你实际删除的项位置不对应，自然没用。

彻底解决的方案 #

第一步：给每个筛选器加唯一key

这是Vue列表渲染的底线要求，必须让Vue能精准识别每个列表项的生命周期。

第二步：让Vue自动管理ref数组

Vue 3支持直接把ref数组绑定到v-for的:ref上，它会自动收集有效引用，元素被移除时也会自动从数组里删掉对应的项，完全不用你手动操作索引。

修正后的完整代码 #

<script setup>
import { ref } from 'vue'
const filtersScope = ref([])
const itemRefs = ref([])

function addFilter () {
  // 生成唯一ID，保证key的唯一性
  filtersScope.value.push({ 
    id: `filter-${Date.now()}-${Math.random()}`, 
    value: '' 
  })
}

function removeFilter (idx) {
  filtersScope.value.splice(idx, 1)
  // 现在不用手动碰itemRefs了，Vue会自动维护
  console.log(itemRefs.value) // 这里不会再出现null！
}

// 如果还是需要批量更新的逻辑（比如替代v-model）
function updateValue() {
  itemRefs.value.forEach((input, idx) => {
    filtersScope.value[idx].value = input.value
  })
}
</script>

<template>
  <div v-for="(filter, idx) in filtersScope" :key="filter.id">
    <!-- 直接绑定ref数组，Vue自动收集引用 -->
    <input 
      type="text" 
      @keyup="updateValue" 
      :ref="itemRefs" 
      :value="filter.value" 
    >
    <button @click="removeFilter(idx)">x</button>
  </div>
  <button @click="addFilter()">add filter +</button>
</template>

额外优化：用v-model简化逻辑 #

其实上面的updateValue完全可以用v-model="filter.value"替代，直接双向绑定输入值，省得手动同步：

<input 
  type="text" 
  :ref="itemRefs" 
  v-model="filter.value" 
>

再补一句：为啥pop()没用？ #

因为你删除的不一定是最后一项啊！比如删第一个筛选器时，pop()只会删掉数组最后一项，而第一个位置的null还留在那；只有删最后一项时，pop()刚好能移除那个null，但这只是巧合，解决不了根本问题。

内容的提问来源于stack exchange，提问作者wittgenstein