在我的应用中，我偶尔会用一个新的数组替换ref〈number[]〉数组，这个数组不是ref。

list2.value = listNoRef;
  console.log(list2.value);

数组list2在我的模板中被用来呈现一个列表。我的日志显示，Proxy有一个修改过的Target，但是我的浏览器没有重新呈现。如果有另一个事件发生，强制重新呈现，列表会显示添加的值。

示例

信息：

• addAnswer1()-〉工程
• addAnswer2()-〉问题
• addAnswer2Clear()-〉工程

<script setup lang="ts">
import { ref } from 'vue';

const list1 = ref<number[]>([]);
const list2 = ref<number[]>([]);
let idx1 = 0;
let idx2 = 0;

const listNoRef: number[] = []

function addAnswer1() {
  list1.value.push(idx1);
  console.log(list1.value);
  idx1++;
}

function addAnswer2() {
  listNoRef.push(idx2);
  list2.value = listNoRef;
  console.log(list2.value);
  idx2++;
}

function addAnswer2Clear() {
  listNoRef.push(idx2);
  list2.value = [];
  list2.value = listNoRef;
  console.log(list2.value);
  idx2++;
}

</script>

<template>
  <h1>My Test</h1>
  <h2>addAnswer1</h2>
  <button @click="addAnswer1()">addAnswer1</button>
  <ul>
    <li v-for="item in list1" :key="item">idx:{{ item }}</li>
  </ul>
  <div>{{ list1.length }}</div>
  <h2>addAnswer2</h2>
  <button @click="addAnswer2()">addAnswer2</button>
  <button @click="addAnswer2Clear()">addAnswer2Clear</button>
  <ul>
    <li v-for="item in list2" :key="item">idx:{{ item }}</li>
  </ul>
  <div>{{ list2.length }}</div>
</template>

• 注意：这是一个简化的例子。我使用了一个类似的实现，在一个异步API调用完成后，在回调中重置一个列表。*

新增

我找过vue ref array replace rerender ...相关的问题，但是还没有找到我的具体案例。
我当前的解决方法是清除.value的列表，然后重新分配它

function addAnswer2Clear() {
  listNoRef.push(idx2);
  list2.value = [];
  list2.value = listNoRef;
  console.log(list2.value);
  idx2++;
}

这个问题背后的原因是什么？有没有更好的解决方法？