반응형을 사용하여 vue3에서 배열을 래핑하고 값을 올바르게 할당하는 방법

반응형을 사용하여 배열을 래핑하여 값을 올바르게 할당하세요

요구 사항: 인터페이스에서 요청한 목록 데이터를 응답 데이터에 할당 arr

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

vue3은 프록시를 사용하지만 객체도 사용하지 않습니다. 배열에 전체 값을 직접 할당할 수도 없습니다. proxy，对于对象和数组都不能直接整个赋值。

使用方法1能理解，直接赋值给用reactive

방법 1을 사용하면 이해가 되지만 reactive로 래핑된 객체에 직접 할당하면 이렇게 할 수 없습니다.

방법 2가 작동하지 않는 이유는 무엇인가요?

푸시 또는 인덱스 순회 할당만이 반응 배열의 응답성을 유지할 수 있습니까?

전체 어레이를 반응형 데이터에 쉽게 연결하는 방법은 무엇입니까?

여러 메소드를 제공합니다.

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

또는

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

또는

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

이러한 메소드는 응답성을 유발할 수 있습니다. vue3의 첫 번째

반응적 재할당이 유효하지 않은 것이 좋습니다.

vue3 공식 문서 설명

reactive( ) 객체의 반응 프록시

따라서 반응 메소드는 객체 객체에 작용해야 합니다. 배열을 사용하려면 배열을 래핑해야 합니다.

let list = reactive({
    data: [{id: 01, name: 'XXX'}]
})

또는 ref를 사용해야 합니다.

let list = ref([{id: 1, name: 'Andy'}])

원저자의 코드는 아래에 인용되어 있습니다. 🎜아아아아

위 내용은 반응형을 사용하여 vue3에서 배열을 래핑하고 값을 올바르게 할당하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!