Vuejs. 하위 구성 요소의 프로펠을 변환해도 경고가 트리거되지 않습니다.왜 그럴까

Vuejs. 하위 구성 요소의 프로펠을 변환해도 경고가 트리거되지 않습니다.왜 그럴까

프롭 돌연변이(Vue 2.6)에서 이상한 점을 발견했습니다.

하위 구성 요소에서 직접 소품을 변형하는 것은 피해야 하며 다음과 같은 유명한 경고를 트리거합니다.

"값이 덮어쓰게 되므로 프로포트를 직접 변환하지 마십시오."

부모 컴포넌트에 다음과 같은 데이터가 있는 경우

exemple: "Hello World"

내가 자식 부품에 소품으로 물려준 거야그 아이 컴포넌트에서 내가 하는 일이

this.exemple = "Hello World!"

경고를 받았어요.그럴 만도대체로.부모의 데이터가 다음과 같은 객체일 경우

exemple : {message : "Hello World"}

그리고 내가 그 아이에게서 그런 짓을 한다고.

this.exemple.message = "Hello World!"

이로 인해 경고가 트리거되지 않으며 상위 구성 요소의 데이터도 업데이트됩니다.

왜 그런지 궁금하네요.왜 프로펠러 돌연변이가 한쪽 케이스에서는 부모에게 전파되지 않는가? javascript가 이 변수들을 저장하는 방법과 관련이 있을 수 있는가?그 수법을 사용하는 것이 좋은 관행입니까?

왜 프로펠러 변환이 한쪽 케이스에서는 부모에게 전파되지만 다른 쪽 케이스에서는 전파되지 않는가?javascript가 이러한 변수를 저장하는 방법과 관련이 있을 수 있다.

예. 개체 및 배열과 같은 JavaScript 참조 변수는 속성/값을 변환해도 참조가 변경되지 않습니다.즉, 부모도 참조에 액세스할 수 있기 때문에 변경된 속성에 액세스할 수 있습니다.Vue는 참조가 변경된 경우에만 프로펠러 변환 경고를 보냅니다.

경고:

this.prop = {}

경고 없음:

this.prop.id = 5

그 수법을 사용하는 것이 좋은 관행입니까?

아니요. 데이터가 소품(자녀)을 통해 이벤트(부모)를 통해 전달되는 단방향 데이터 흐름 위반으로 되돌아갑니다.

---

좋아요, 하지만 왜 Vue는 그 변화에 대해 경고하지 않는 거죠?

1000개의 속성을 가진 개체 또는 1000개의 항목을 가진 어레이를 고려합니다.Vue는 1000개의 모든 변경 사항을 자세히 확인해야 하며, 각 항목을 이전 값과 개별적으로 비교해야 하므로 빠른 방법이 없습니다.이로 인해 성능에 영향을 미치고 많은 애플리케이션을 사용할 수 없게 될 수 있습니다.

---

Vue 팀원 Bolerodan의 코멘트는 다음과 같습니다.

보통은 그렇게 하면 안 돼요.이로 인해 코드에 예기치 않은 버그가 발생할 수 있습니다.일반적으로 오브젝트를 복사하고 수정한 후 부모에게 위로 방출해야 합니다(마지막 단락에서 언급한 것처럼).이것이 내가 취하는 방법이며, 상향식, 상향식 접근법에 대한 일반적인 합의이다.

아주 간단한 대답은 당신이 변이하고 있다는 것입니다reference value그리고 Vue는 모든 걸 추적하지 않아reference대신 참조가 있는 주소만 확인합니다.따라서 해당 값을 다시 할당하면 경고가 표시됩니다.

동작을 이해하는 좋은 예는 변수 선언을 통한 이해입니다.const

const변수를 불변하게 하지만 값이 다음과 같은 경우 동일한 변수가 적용됩니다.primitive자연은 바꿀 수 없지만, 만약 그것이 만약 그것이reference변경할 수는 없지만 다음 위치에 있는 값을 확실하게 업데이트할 수 있습니다.reference

const a = 'Foo' // Primitive value

a = 'bar' // voilation
 
const b = { // Reference value
 name: 'Foo' 
}

b.name = 'Bar' // It's good

console.log(b)

b = {} // re-assign is voilation

돌연변이 방지 기능은 프로펠러에 대한 직접 할당만 포착하기 때문에 프로퍼티 조작은 포착하지 않습니다.새로운 값을 프로포트에 할당하면 - 에 할당됩니다.prop프로펠러를 공급하는 부모 Vue 컴포넌트에 있는 변수가 아닙니다.

부모 컴포넌트의 어떤 것이 공급 변수를 갱신하는 즉시 - 소품은 이 새로운 값으로 갱신되고 자녀 컴포넌트의 소품에 할당한 값은 덮어쓰게 됩니다.

소품에 개체를 공급한 다음 하위 구성 요소의 소품 내부에 있는 속성을 변환하면 상위 구성 요소 내부에 있는 동일한 개체에 영향을 미칩니다.그러나 자녀 컴포넌트의 소품에 새 개체를 할당하려고 하면 소품 변종에 대한 동일한 경고가 표시됩니다.

언급URL : https://stackoverflow.com/questions/65037324/vuejs-mutating-prop-in-child-component-does-not-trigger-warning-wondering-why