vue의 반응성 reactivity

<Do it! Vue.js 입문>을 기본으로 배운 내용입니다.

 

목차

• 1. 반응성

• 1-1) vue가 변경 내용을 추적하는 방법

 

---

1. 반응성

vue가 데이터 변화를 감지했을 때 자동으로 화면을 다시 갱신하는 특성

반응성에 대해 알면 아래와 같은 방법들을 익힐 수 있다!

• 프레임워크 내부적으로 화면을 그리는 방법
• 가상 돔이 동작하는 방법
• 화면을 빠르게 그리기 위해 브라우저에 부하를 주지 않고 돔을 추가,삭제하는 방법

 

 

1-1) vue가 변경 내용을 추적하는 방법

1. Vue 인스턴스에 JavaScript 객체를 data 옵션으로 전달한다.
2. Vue는 모든 속성에 Object.defineProperty를 사용하여 getter/setters로 변환한다.
   ※ getter / setter 는 사용자에게는 보이지 않으나 속성에 액세스 하거나 수정할 때 Vue가 종속성 추적 및 변경 알림을 수행할 수 있다. 
3. 모든 컴포넌트 인스턴스에는 해당 watcher 인스턴스가 있으며, 이 인스턴스는 컴포넌트가 종속적으로 렌더링되는 동안 수정된 모든 속성을 기록한다.
4. 나중에 종속적인 setter가 트리거 되면 watcher에 알리고 컴포넌트가 다시 렌더링 된다.