initData 메소드를 거쳐야 위 예제처럼 ob, get, set 이 추가
Use 3 Class
- JS Set - for change detection
- JS Proxy - for intercept change
- JS Map - for track dependencies
data 옵션으로 전달하면 Vue는 모든 속성에 Object.defineProperty를 사용하여 getter/setters로 변환합니다. 이는 Vue가 ES5를 사용할 수 없는 IE8 이하를 지원하지 않는 이유
모든 컴포넌트 인스턴스에는 해당 watcher 인스턴스가 있으며, 이 인스턴스는 컴포넌트가 종속적으로 렌더링되는 동안 “수정”된 모든 속성을 기록
나중에 종속적인 setter가 트리거 되면 watcher에 알리고 컴포넌트가 다시 렌더링
Vue는 DOM 업데이트를 비동기로
데이터 변경이 발견 될 때마다 큐를 열고 같은 이벤트 루프에서 발생하는 모든 데이터 변경을 버퍼에
컴포넌트는 즉시 재 렌더링되지 않습니다. 큐가 플러시 될 때 다음 “tick” 에서 업데이트
Vue는 비동기 큐를 위해 네이티브 Promise.then 와 MessageChannel를 시도하고 setTimeout (fn, 0)으로 돌아감
Diagram Animation
Reactivity
반응형에 대해 깊이 알아보기 - Vue.js
이제 조금 더 깊게 알아볼 차례입니다. Vue의 가장 두드러진 특징 중 하나는 눈에 잘 띄지 않는 반응형 시스템입니다. 모델은 단순한 JavaScript 객체입니다. 수정하면 화면이 갱신됩니다. 스테이트 관리를 간단하고 직관적으로 만들어주지만, 몇 가지 흔한 함정을 피하려면 어떻게 작동하는지 이해하는 것도 중요합니다. 이 섹션에서는 Vue의 반응형 시스템의 세부사항을 다룹니다.
https://kr.vuejs.org/v2/guide/reactivity.html
Reactivity in Depth - Vue.js
Vue.js - The Progressive JavaScript Framework
https://vuejs.org/v2/guide/reactivity.html
Tracing or Debugging Vue.js Reactivity: The computed tree
With all the buzz about the next major release of Vue, there is plenty of intrigue surrounding announced features, one that caught my attention was: Better debugging capabilities: we can precisely trace when and why a component re-render is tracked or triggered In this article, I'll be talking about what we can do now in Vue 2.x to trace reactivity and maybe tune some stray code that might impact performance.
https://medium.com/dailyjs/tracing-or-debugging-vue-js-reactivity-the-computed-tree-9da0ba1df5f9
Reactivity Korean
Vue는 어떻게 data에 Observer / getter / setter 를 추가할까
Vue.js 를 이용하여 개발하는 도중 console.log 를 이용하여 데이터를 출력하는 경우가 있습니다. 이때 실제 코드로 작성한 데이터 코드에는 없는 객체/함수들을 볼 수 있습니다. 이번에는 Observer / get / set 이 어떤 과정을 거쳐 사용자가 작성한 Vue의 데이터 객체에 추가되는지 살펴보겠습니다. 이번에 작성할 Vue 앱은 매우 간단합니다. HTML 과 JS 파일 전체 입니다.
https://vuejs-kr.github.io/jekyll/update/2017/01/21/how-vue-add-observer-getter-setter/
