Vue.js는 i가 메소드 변수임에도 여전히 props를 업데이트합니다.

Question

두 개의 배열(하나는 소품의 배열이고 다른 하나는 내 구성 요소의 배열)을 비교하는 다음 방법이 있습니다. props 배열에는 있지만 구성 요소 배열에는 없는 모든 요소를 ​​세 번째 배열에 삽입하고 "destroy: true"라는 속성을 추가하여 데이터베이스에서 삭제하는 백엔드로 보낼 수 있습니다.

그러나 어떤 이유로 메서드에서 사용하는 변수 대신 내 소품이 업데이트됩니다. Prop을 직접 참조하지 않기 때문에 왜 이런 일이 발생하는지 잘 모르겠지만 해당 내용을 메서드 내의 변수에 복사합니다.

으아악

왜 이런 일이 발생하나요? 내 구성 요소의 다른 요소는 잘 작동하지만 이 요소에만 문제가 있습니다.

Answer 1

예, this.props.array 배열의 요소 를 새로운 메소드 로컬 배열로 복사하고 있지만 배열의 요소는 객체이기 때문에 두 배열 모두 동일한 객체( 객체 에 대한 참조)를 포함하게 됩니다.

확산 연산자를 사용하여 원본 요소의 let newElement = { ...element }얕은 복사본을 만들 수 있습니다. 이렇게 하면 원본 개체의 모든 속성을 복사하여 완전히 새로운 개체가 생성됩니다. 하지만 원본 객체의 속성에 배열/객체가 포함되어 있는 경우 동일한 문제에 직면하게 된다는 점에 유의하세요. 조금 더 깊이 들어가면 됩니다.