3. 반응형 시스템이 가능한 이유

소스 : https://github.com/donghyeon0725/vue_tutorials

donghyeon0725/vue_tutorials

 

data 프로퍼티가 반응형이 되는 원리

 

vue 인스턴스가 초기화 되는 동안 Vue.js는 data 객체의 프로퍼티에 접근하고 데이터를 감싸는 프락시(대리인, wrapper)를 생성하여 데이터를 관찰할 수 있도록 만든다. 

또한 내부에 _data를 만들고 this를 통해 data에 접근할 때 실행컨텍스트를 변경하는 것 같다.(이 한줄은 내 예측)

 

구체적으로 내부에 들어간 모든 값을 Object.defineProperty() 메소드를 이용해서 게터와 세터를 만든다.

이 때, setter 에 Watcher를 호출하게 하고 이는, 랜더링을 담당하는 함수를 호출한다.

그리고 랜더함수는 이를 랜더링 함으로써 반응형이 완성 되는 것이다.

 

반응형이 작동하는 순서는 아래와 같다.

1. 수정 이벤트 발생
2. 세터를 통해서 watcher 호출
3. 와처가 랜더함수를 호출
4. 랜더링

한편 data 프로퍼티에 들어간 값도 중요한데,

배열의 경우 push 나 splice 등등의 메소드를 통해서도 값이 변경 될 수 있기 때문에,

해당 메소드를 Array.prototype을 통해 Vue.js에서 재구현 해놓은 상태이다.

이를 통해서 원시값을 포함한 모든 데이터가 관찰 가능한 상태가 되었다.

 

 

다만, 변경 내용을 추척할 수 없는 두가지 경우가 있는데

1.  vm.messages[item] = 4 과 같이 배열에 아이템을 삽입하거나 배열의 길이 자체를 수정했을 때
2. 객체에 새로운 프로퍼티를 추가&삭제한 경우

1.번의 경우 배열에 대한 반응성을 놓치지 않으려면 vm.messages.push(4) 나 splice(0) 같은 변형 메소드를 사용해야한다.

2. 번의 경우 뷰에서 제공하는 메소드를 통해서 프로퍼티를 추가& 삭제 해야만, 반응형을 놓치지 않을 수 있다.

• 추가할 때 : Vue.set(object, key, value) 또는 vm.$set(object, key, value)
• 삭제할 때 : Vue.delete(object, key, value) 또는 vm.$delete(object, key, value)

 

---

computed 프로퍼티가 반응형이 되는 원리

이는 다음에 정리하도록 한다. (내용이 너무 어렵다 ;;)

 

---

props 프로퍼티가 반응형이 되는 원리

이 또한 다음에 정리하도록 한다. (내용이 너무 어렵다 ;;)