설명: 데이터에 소품 전달 - 내 데이터가 변경되지 않는 이유는 무엇입니까?

오늘 나는 오랫동안 알고 있어야 할 기본적인 것을 발견했습니다. data 속성과 연결된 props 속성 값은 구성 요소가 초기화될 때만 설정됩니다! 소품에 대한 추가 변경 사항은 data 속성에 적용되지 않습니다.

예

다음과 같은 자식 구성 요소가 있다고 가정해 보겠습니다. 이 구성 요소는 부모가 전달한 이름을 가져옵니다.
Child.vue :

export default {
  name: 'Child',
  props: {
    name: String,
  },
  data() {
    return {
      localName: this.name,
    };
  },
};

부모 구성 요소는 이 구성 요소에 이름을 간단히 전달할 수 있습니다. 내부의 초기 데이터 값Child은 부모 내부에 정의된 이름으로 설정됩니다.

값에 의한 전달이 있는 런타임 유형

저는 항상 이 연결localName: this.name이 참조로 전달된다고 생각했습니다. 따라서 소품을 변경하면 매번 data도 변경됩니다. 그러나 이것은 잘못된 것입니다!

오히려 값으로 전달됩니다. 즉, this.name 의 값이 복사되어 localName 에 적용됩니다. 따라서 컴포넌트의 렌더링 시간 동안 this.name에는 localName의 초기값만 적용됩니다. 구성 요소를 다시 렌더링하지 않는 한 추가 변경 사항은 무시됩니다.

이것은 props , String 또는 Number 와 같은 모든 일반 Boolean 유형에 적용됩니다.

배열과 객체는 다릅니다

이것은 기사의 끝일 수 있습니다. 그러나 예외가 있습니다.

배열과 객체는 참조로 전달됩니다. 따라서 실제로 배열이나 개체의 중첩된 속성을 변경하는 것이 가능합니다. 가능하더라도 하지 말아야 합니다. 자세한 내용은 공식docs을 참조하십시오.

예시

또한 props 변경 동작과 관련data 속성에 미치는 영향을 보여주는 interactive example을 만들었습니다.

요약

상위 구성 요소의 데이터를 변경하고 하위 구성 요소의 로컬 상태에 영향을 미치지 않는 경우 이를 염두에 두십시오.

이것은 나의 첫 번째 기사이므로 개선, 피드백 또는 잘못된 주장에 대한 포인터에 대한 제안을 환영합니다.