Vue3中函数式ref与普通ref的差异及代码疑问求解

核心原因：两个数组的内存引用地址不同 #

控制台显示的[li, li, li]只是数组内容的直观展示，但===是严格全等判断，它比较的是两个值的内存引用地址，而非内容是否一致。两种ref绑定方式生成的是完全独立的数组对象，引用地址不同，所以判断结果为false。

两种ref绑定的细节差异 #

1. 手动赋值的elements
   你初始化elements为ref([])，这是一个你主动创建的空数组。通过:ref="(el) => (elements[i] = el)"，只是把每个DOM元素填充到这个原始数组中，最终elements.value的引用地址还是你一开始创建的那个数组。

2. 自动绑定的newElements
   Vue3中当ref直接绑定到v-for元素上时，Vue会自动生成一个新数组来存储所有匹配的DOM元素——哪怕你初始化newElements为ref('')，Vue也会覆盖这个值，替换成内部生成的数组。这个数组和你手动维护的elements.value是完全不同的内存对象。

验证内容一致性的方法 #

如果要判断两个数组的内容是否一致，可以通过遍历比较每个元素：

const checkContentSame = () => {
  if (elements.value.length !== newElements.value.length) return false;
  // 逐个比较DOM元素的引用
  return elements.value.every((el, index) => el === newElements.value[index]);
}
// 调用该函数会返回true

小规范建议 #

初始化newElements时建议用ref([])而非ref('')，虽然Vue会自动修正值类型，但符合规范的初始化能避免不必要的混淆。

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