Vue Reactivity

Created
Created
2021 Mar 19 8:34
Tags
Tags
Link
Link
Description
Description
initData 메소드를 거쳐야 위 예제처럼 ob, get, set 이 추가

Use 3 Class

  • JS Map
    - for track dependencies
    • notion image
      notion image
 
 
Vue Observer
Vue defineReactive
Vue getter
Vue setter
Vue defineComputed
 
 
data 옵션으로 전달하면 Vue는 모든 속성에 Object.defineProperty를 사용하여 getter/setters로 변환합니다. 이는 Vue가 ES5를 사용할 수 없는 IE8 이하를 지원하지 않는 이유
모든 컴포넌트 인스턴스에는 해당 watcher 인스턴스가 있으며, 이 인스턴스는 컴포넌트가 종속적으로 렌더링되는 동안 “수정”된 모든 속성을 기록
나중에 종속적인 setter가 트리거 되면 watcher에 알리고 컴포넌트가 다시 렌더링
 
Vue는 DOM 업데이트를 비동기로
데이터 변경이 발견 될 때마다 큐를 열고 같은 이벤트 루프에서 발생하는 모든 데이터 변경을 버퍼에
컴포넌트는 즉시 재 렌더링되지 않습니다. 큐가 플러시 될 때 다음 “tick” 에서 업데이트
Vue는 비동기 큐를 위해 네이티브 Promise.then 와 MessageChannel를 시도하고 setTimeout (fn, 0)으로 돌아감
notion image
 
 

Diagram Animation

Reactivity

Reactivity Korean

 
 

Recommendations