Vue 소스 탐구 - 데이터 귀속 논리 구조

Vue 소스 탐구 - 데이터 귀속 논리 구조
데이터 관찰 시스템은 Vue가 데이터 귀속, 비동기 업데이트를 실현하는 핵심 모듈이고 데이터 관찰 시스템의 실현도 Vue 원본에서 가장 복잡한 부분이다. 구체적인 실현을 자세히 연구하기 전에 전체 데이터 귀속의 논리 구조에 대해 충분한 인식을 하면 원본을 해석하는 데 도움이 될 것이다.
먼저 설명하자면 세 가지 종류의 이름은 오해하기 쉬우므로 앞으로는 Observer를 관찰목표, Watcher를 감시기, Dep를 의존대상이라고 부른다.
데이터 귀속 논리 구조
Vue의 데이터 관찰 시스템은 게시자/구독자 모델을 바탕으로 데이터 업데이트가 페이지를 갱신하는 과정은 주로 데이터 관찰 시스템의 철삼각 관계에 의존한다.이 시스템에서 주요 역할은 각각 Observer,Dep,Watcher 세 가지 대상이고 각 역할이 데이터 업데이트를 관찰하는 과정에서 각자 맡은 직책에 대해 깊이 있게 이해해야 한다.다음은 세 명의 주인공이 등장해 이들을 소개한다.
ObserverObserver는 관찰목표류에 해당한다. 데이터 귀속 논리 구조에서 직책은 관찰해야 할 데이터 대상을 수집하고 변수 액세스기의 포장을 하며 관찰해야 할 모든 대상에 대해 발표자 대상을 등록하고 발표자가 해당하는 모니터를 등록하는 것이다.여기서 매우 교묘하게 알림 모니터 데이터 업데이트를 촉발하는 이벤트의 등록이다. 일반적인 게시 구독 모델은 이벤트 관리자나 스케줄링 센터를 구축하여 각종 이벤트의 등록을 통일적으로 관리해야 한다. 그러나 Vue의 데이터 귀속은 이런 메커니즘을 필요로 하지 않는다. 이것은 Object.defineProperty 방법을 빌려 감시된 모든 데이터에 액세스기를 설정한다.데이터의 접근 행위에 의존하여 자연히 사건의 촉발을 실현하였다.Vue 실례에 설정된 data 속성을 초기화할 때 입력한 데이터 대상에 대해 줄에 대한 의존 추적을 하고 포장된 변수는 _data 속성에 저장하며 이 과정에서 발표자와 모니터의 의존 추가는 보이지 않는다.설정watch 속성 현식 설정의 모니터를 통해 실례_watchers의 사유 속성에서 볼 수 있다.모든 구성 요소가 초기화되면 유일한 _watcher 대상이 있습니다. data 에 등록된 데이터의 변동을 감시하고 보기를 업데이트하는 데 사용되는 모니터입니다. 기본적으로 각 속성의 의존 감시 그룹에 추가됩니다.모든 관찰 가능한 상태로 수정된 속성에는 Dep 실례 즉 발표자가 포함되어 있다. 이 대상의 subs 속성은 의존하는 모든 모니터Watcher 실례 대상을 저장하는 데 사용되며, subs는 구독자, 즉 이 데이터 대상이 변동하는 모든 모니터의 수조 집합으로 이해할 수 있다.처음에 데이터 수집에 의존해야 하는 이유는 다른 개발자의 결론을 참고하면 모든 데이터가 감시할 가치가 없기 때문이다. 감시에 사용되지 않은 데이터는 성능에 대한 낭비라는 것을 알아야 한다. 실례적인 관찰에서도 페이지에 사용되지 않은 속성이 의존항으로 초기화되지 않았기 때문에 그 수치가 바뀌어도페이지도 여분의 리셋을 촉발하지 않습니다.
DepDepVue의 데이터 관찰자 시스템에서 발표자의 역할을 한다. 이는 데이터 업데이트와 의존 이벤트를 촉발하고 구축할 뿐만 아니라 모든 감시 데이터가 의존하는 감시기를 저장하는 데 사용된다. 이것은 바로 첫 번째 의존을 수집할 때의 중요한 일환이다.실례를 초기화하는 과정에서 추적 변화가 필요한 모든 데이터를 수집했고 Observer를 이용하여 모든 속성을 재포장하는 동시에 각각의 dep 대상을 만들었고 get과 set 방법에서 각각 Dep의 두 가지 방법을 사용했다. depend 의존을 구축하고 notify 변동을 알렸다.또Dep는 모니터에 의존하는 증감도 책임진다.구조Dep류의 과정에서 전역적Dep.target 대상과 targetStack수조를 정의했다. targetStack수조는 실행을 기다리는 watcher창고를 저장하는 데 사용되고Dep.target현재의 모니터를 가리키는 데 사용되며 유일해야 한다. 모니터를 구축하는 의존에 중요한 역할을 한다. 데이터를 리셋하는 getter할 때그것이 존재할 때만 데이터와 모니터의 의존을 실행합니다. 즉, 현식 설정 watch 이나 변수 computed 를 만들었을 때만 실례적인 개인 속성에서 모니터를 볼 수 있습니다.
WatcherWatcher는 이 구조의 감시기로서 관찰자의 역할을 충당한다.Vue 실례를 초기화하는 과정에서 기본적으로 모니터를 만들 것입니다. 이 모니터는 실례 대상의 데이터 변화를 감시하고 보기를 업데이트하는 데 사용되며, 실례의 개인 속성_watcher은 그것을 저장하는 데 사용됩니다.관찰할 수 있는 데이터를 만들 때 각 데이터의Dep 대상은 모니터를 수집하고 의존을 구축한다. 데이터가 변할 때Dep 대상은 모든 모니터에게 업데이트를 실행하라고 통지한다. 업데이트를 실행하는 데는 두 가지 모델이 있는데 의존이 설정computed 변수를 통해 만들어지면 관련 업데이트 작업을 즉시 촉발한다.데이터 dep.subs 그룹에 의존하는 모니터가 없으면 기본 타성 업데이트 모드입니다.Watcher류의 가장 주요한 역할은 보기 업데이트를 알리는 것이다. 모두가 알다시피 보기의 업데이트는 시간이 많이 걸리고 프로그램 성능에 영향을 줄 수 있다. 보기 업데이트로 인한 성능 손실을 최대한 줄이기 위해 보기 업데이트를 실행하기 전에 버퍼링 시간이 있다. 이 시간에 마지막 모니터가 받은 변경 사항을 수집하고 불필요한 중복 업데이트를 줄인다.최상의 성능을 구현합니다.
구성도
데이터 관찰 시스템의 세 주인공을 충분히 파악한 후에 홈페이지에 붙인 설명도를 보면 드디어 Vue의 데이터 관찰 시스템의 구조를 파악할 수 있다. 다만 과장된 보기의 구체적인 실현과 데이터 관찰 시스템의 상호작용은 아직 모색하지 않았고 앞으로 꼼꼼하게 탐색할 것이다.이제 베일의 데이터 귀속 원리를 비교적 명확하게 이해하게 되었다.
간단한 실례
데이터 귀속과 관련된 초기화 과정을 더욱 명확하게 이해하기 위해 매우 간단한 실례를 만들었다. 데이터는 두 가지 속성을 설정했는데 그 중에서 name 변수는 페이지에서 사용되지 않고 의존msg 모니터도 현식으로 설정했다.

new Vue({
  data () {
    return {
      msg: 'hello',
      name: ''
    }
  },
  watch: {
    'msg' (value) {
      console.log('msg   ')
    }
  }
})

아래 캡처는 실례와 관련된 모니터의 사유 속성이고 _watcher는 페이지의 렌더링을 추적하는 모니터로 모든 실례가 유일하다._wacthers는 실례가 가지고 있는 모든 모니터의 집합이다.현식 설정 watcher 은 수조의 첫 번째 대상이다.여기에는 Observer 뒤의 포장 과정이 보이지 않지만 msg 속성이 바뀌면 모니터가 실행하는 리셋 디스플레이를 볼 수 있다.
Vue 대상 실례화부터 데이터 귀속의 핵심 실현을 분석하기 시작할 때까지 이 과정에서 진정으로 곤란한 문제에 부딪히지 않았다.그러나 생각지도 못한 것은 데이터 귀속이라는 Vue의 핵심 특색 기능이 나로 하여금 며칠 동안 열심히 공부하게 했다. 마치 이전에 디자인 모델에 대한 이해가 그렇게 무력해 보였던 것 같다.그 동안 선인들이 한 분석 설명 문장을 검색하여 여러 측면에서 깊이 있게 이해하려고 했지만 대부분 해석을 다 읽은 후에도 이 모듈을 철저하게 이해하지 못했다고 생각했다. 나중에 쉽게 Vue 관찰자 시스템을 실현하는 문장을 읽었기 때문에 나는 핵심 고찰이 어떻게 실현되었는지에 대해 뚜렷한 인식을 가지게 되었다.그리고 디자인 모델에 대해서도 더욱 깊이 이해했다.아마도 원본을 처음 읽을 때 비핵심적인 기술이 너무 많아서 핵심 부분에 대한 이해를 방해했을 것이다. 또한 이전의 지식이 견고하지 않았기 때문에 이번 학습에서 좋은 경험을 얻었고 본질에 더욱 관심을 가져야 한다.