vue prop 객체 감지 안되는 경우

---

 vue 로 개발하는 와중에 부모 컴포넌트가 자식 컴포넌트에게 배열을 보내주는 상황에서

배열 안의 값이 하나가 변경될 경우 감지를 못하는 상황이 있었다.

 

이러한 경우 때문에 속앓이를 좀 했는데, 답을 찾았다.

---

data : {

        messages : []

        , newMessage : ' '

}

,  computed : {

    addDisabled() { ... }

}

---

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가 messages 배열을 관찰하는 경우 또 다른 Observer 객체를 만들어 배열 객체의 _ob_ vm 프로퍼티에 할당한다.

 

그리고 Vue 는 Array.prototype 의 .push() .pop() .shift(), unshift(), .splice(), sort(), reverse() 와 같은 원래의 변형 메소드를 감싸는 함수에서 와터에 데이터 변경 사항을 통지 하도록 Array.prototype 을 변경한다.

 

이렇게 해서 messages.push{(...)} 를 호출할 때 렌더 와처가 이를 감지하고

re-render 를 트리거해서 DOM 을 업데이트 한다. 

 

messages 배열 안에 객체를 저장하기 때문에 messages 배열 자체에 대한 Observer 객체를 생성하는 것 이외에도

Vue 는 배열안의 각 messages 객체를 관찰하기 위해 배열 안의 각 messages 객체에 대한 observer 객체를 생성한다.

 

이 객체는 messages 객체의 모든 프로퍼티를 살펴본 후 id 프로퍼티, text 프로퍼티, createAt 프로퍼티가 배열도 아니고

평범한 자바스크립트 객체도 아니라는 것을 알게 되고 단순히 이 프로퍼티에 대해 반응형 게터와 세터 함수를 정의한다.

 

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

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

---

⭕ Vue 가 변경 내용을 츄적 할 수 없는 유형 두가지

자바스트립트는 아래와 같은 방식으로 배열에 변화가 생겼을 때 어떠한 이벤트도 발생시키지 않는다.

 

1. 인덱스로 배열에 아이템을 삽입하는 것.

vm.messages[index] = newItem 

 

2.  배열의 길이를 수정 하는 것.

vm.messages.length = newLength

---

⭕ 배열에 대한 반응성을 놓치고 싶지 않다면 ?

1. 변형 메소드 사용

배열에 대한 반응성을 놓치지 않으려면 변형 메소드를 사용해야 한다.

 

    - 변형 메소드 - push

        vm.messages.push(newItem)

 

    - 변형 메소드 - splce

        vm.messages.splce(0)

 

 

2. 객체에 새로운 프로퍼티를 추가 / 삭제

객체에 새로운 프로퍼티를 추가 / 삭제하는 방법도 존재한다.

 

    - 새로운 운 프로퍼티를 추가하는 방법

        messages.replicesCount = 0

 

    - 삭제하는 방법도 있다.

        delete messageObject.createdAt 

---

비전공자 개발자들의 개발팁 면접썰 국비썰 궁굼한건 댓글 달아주세요 😊 ❤

---

 

💚디벨빈수 브이로그 구독 좋아요 부탁드립니당💛

---