vue prop 객체 감지 안되는 경우

vue prop 객체 감지 안되는 경우

728x90

반응형

vue 로 개발하는 와중에 부모 컴포넌트가 자식 컴포넌트에게 배열을 보내주는 상황에서 배열 안의 값이 하나가 변경될 경우 감지를 못하는 상황이 있었다.

이러한 경우 때문에 속앓이를 좀 했는데,

Vue 가 인스턴스를 초기화 할 때 실제 데이터를 저장하기 위해 Vue 는 vm._data 를 만들고 vm.messages 와 vm.newMessages 에 대해 Object.defineProperty 로 게터와 세터를 정의해 두 프로퍼티에 접근하는 프락시를 만든다.

이렇게 해서 vm.message 에 접근하려고 하면 프락시에 의해 vm._data.messages 로 접근한다.

따라서 두 프로퍼티의 반응성은 실제로 vm._data 에서 발생한다.

vm.data 를 반응형으로 만들기 위해 Vue는 vm_data 를 관찰한다.

다시 말해 Vue 는 observer 객체를 생성하고 해당 객체를 vm._data ._ob_ 에 할당해 관찰 대상으로 표시한다.

이 observer 객체는 vm._data 의 모든 프로퍼티를 처리할 것이며,

이 책의 예제에서는 messages 와 newMassage 가 그에 해당한다.

newMassage 프로퍼티에 관해서는 그것이 원시 값이기 때문에

Vue는 단순히 반응형 게터와 반응형 세터를 정의하는 것 외에도 배열이기 때문에 Vue가 추가적인 관찰을 수항핸다.

추가적인 관찰을 수행하지 않으면 messages 의 배열의 변경 사항을 알아챌 수 없다.

왜냐하면 messages 프로퍼티의 반응형에

게터 vm._data.messages = [...] 를 통해 접근할 때만 호출 되기 때문이다.

Vue가 messags 배열을 관찰하는 경우 또 다른 Observer 객체를 만들어 배열 객체의 _ob_ vm 프로퍼티에 할당한다.

그리고 Vue 는 또한 Array.prototype 의 .push() .pop() .shift(), unshift(), .splice(), sort(), reverse() 와 같은 원래의 변형 메소드를 감싸는 함수에서 와터에 데이터 변경 사항을 통지 하도록 Array.prototype 을 변경한다. 이렇게 해서 messages.push{(...)} 를 호출할 때 렌더 와처가 이를 감지하고 re-render 를 트리거해서 DOM 을 업데이트 한다.

messages 배열 안에 객체를 저장하기 때문에 message 배열 자체에 대한 Observer 객체를 생성하는 것 이외에도 Vue 는 배열안의 각 message 객체를 관찰하기 위해 배열 안의 각 message 객체에 대한 observer 객체를 생성한다.

이 객체는 message 객체의 모든 프로퍼티를 살펴본 후 id 프로퍼티, text 프로퍼티, createAt 프로퍼티가 배열도 아니고 평변함 자바스크립트 객체도 아니라는 것을 알게 되고 단순히 이 프로퍼티에 대해 반응형 게터와 세터 함수를 정의한다.

이제 options 의 data 객체에 있는 모든 것이 반응형, 즉 관찰 가능하게 되었다.

data 객체의 구조가 아무리 복잡해도 Vue 는 모든 것이 반응형인지를 확인하기 위해 전체 구조를 살펴볼 것이다.

728x90

반응형

from http://soobindeveloper8.tistory.com/593 by ccl(A) rewrite - 2021-11-23 10:01:39