Vue3替换ref数组未触发重渲染的问题原因与优化方案

Vue的响应式系统是通过检测引用类型的引用变化来触发组件重渲染的。你的listNoRef是同一个普通数组引用：

1. 第一次执行addAnswer2()时，list2.value = listNoRef会把list2的响应式引用指向listNoRef，此时Vue能检测到引用变化，触发重渲染；
2. 后续再执行addAnswer2()时，你只是给listNoRefpush了新元素，然后再次把list2.value赋值为同一个listNoRef引用——因为引用没变化，Vue的响应式系统认为值没有更新，所以不会触发重渲染。

而addAnswer2Clear()里先把list2.value设为空数组（这是一个新的数组引用），再赋值listNoRef，相当于连续两次改变了list2.value的引用，Vue能检测到这个变化，所以触发了重渲染。

不用先清空再赋值，只要保证每次赋值给list2.value的是新的数组引用即可，几种常用方式：

1. 展开运算符创建新数组 #

function addAnswer2() {
  listNoRef.push(idx2);
  list2.value = [...listNoRef]; // 创建新数组
  console.log(list2.value);
  idx2++;
}

2. 使用Array.from()生成新数组 #

list2.value = Array.from(listNoRef);

3. 使用数组的slice()方法 #

list2.value = listNoRef.slice();

4. 直接将listNoRef转为响应式（如果场景允许） #

如果你的listNoRef本身需要频繁修改并同步到视图，可以直接把它声明为ref，这样后续修改时Vue会自动跟踪数组内部变化，不用手动赋值：

const listNoRef = ref<number[]>([]);

function addAnswer2() {
  listNoRef.value.push(idx2);
  // 若必须使用list2，仅需首次赋值即可，后续修改listNoRef时视图会自动更新
  // list2.value = listNoRef.value;
  idx2++;
}

注：实际异步API场景中，直接将API返回的新数组赋值给list2.value即可（API返回的是全新引用）；若需基于原有数组修改后赋值，用上述创建新数组的方式即可。

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