リアクティブ無効化の問題はリアクティブによって定義されますか?

配列のリアクティブ無効化をラップするには、reactive を使用します。

または: reactive が使用されている場合、reactive は無効になります。reactive を通じて応答性の高い配列を定義します。ネットワーク リクエストによって返されたデータが配列に割り当てられた後は、ページ上のデータは更新されません。

const arr = reactive([]);
const load = () => {
  const res = [2, 3, 4, 5]; //假设请求接口返回的数据
  // 方法1 失败，直接赋值丢失了响应性
  // arr = res;
  // 方法2 这样也是失败
  // arr.concat(res);
};

理由：

方法 1: arr = res の場合、res の新しい配列を arr に直接割り当てます。reactive で宣言した reactive オブジェクトを arr でプロキシするのですが、プロキシ オブジェクトにはプロキシ オブジェクトのプレフィックスが必要ですが、このとき res が直接 arr に値を代入するため、arr の応答性が失われます。vue3 でプロキシを使用すると、データ全体をオブジェクトまたは配列に直接割り当てることができません。

方法2の場合、arrはそのまま配列とみなされますが、リアクティブパッケージ化後はarrが通常の配列ではなくなるため、方法2も無効となります。

解決：

解決策 1:プロパティが配列である応答性オブジェクトを作成する (一般的に使用される、推奨される)

let state = reactive({
  list: [],
})
let arr = [1,2,3]
state.list = arr

解決策 2: ref 関数を使用する(一般的に使用される、推奨される)

const arr = ref([])
arr.value = [1, 2, 3]

解決策 3:配列のプッシュ メソッドを使用する

let list = reactive([])
let arr = [1, 2, 3]
arr.forEach((item) => { 
 list.push(item)
})

或

let list = reactive([])
let arr = [1, 2, 3]
list.push(...arr)