Vue Object 의 변화 탐지 실현 코드

데이터 관찰
Vue 의 대상 변화 수 사 는 Object.define Porperty 를 통 해 이 루어 졌 지만 Object.define Porperty 의 방식 에 결함 이 있 습 니 다.예 를 들 어 전체 대상 을 직접 대리 할 수 없고 매번 대상 의 모든 속성 을 순환 해 야 합 니 다.특히 앞으로 ES6 의 프 록 시 를 사용 해 이 부분 을 다시 쓰 겠 다 고 말 했다.이 블 로 그 는 Object.define Porperty 가 실현 한 대상 조사 에 대해 소개 한다.
아래 코드 를 살 펴 보고 defineReactive 함 수 를 정의 합 니 다.Object.definePorperty 를 사용 하여 대상 의 속성 을 옮 겨 다 닐 때 get 과 set 를 설정 합 니 다.대상 속성 이 읽 힐 때 get 을 터치 하고 대상 속성 이 설정 되 었 을 때 set 를 터치 합 니 다.이렇게 해서 data 에 대한 데이터 납 치 를 완 성 했 습 니 다.Vue 의 사상 은 응답 식 이기 때문에 우 리 는 이런 변 화 를 수집 해 야 합 니 다.

function defineReactive(data,key,val){
  Object.definePorperty(data,key,{
    enumerable: true,
    configurable: true,
    get:function(){
      return val;
    }
    set :function (newVal){
      if(val === newVal){return}
      val = newVal;
    }
  })
}

수집 에 의존 하 다
Dep 클래스 를 만 들 고 get 에서 의존 도 를 수집 하 며 set 에 의존 도 를 추가 합 니 다.

class Dep{
  constructor(){
    this.arr = []
  }
  addSub(sub){
    this.arr.push(sub)
  }
   removeSub(sub){
    remove(this.arr,sub)
  }
  depend(){
    if(window.target){
      this.addSub(window.target)
    }
  }
  notify(){
    const arrs = this.arr.slice();
    for(let i = 0; i< arrs.lenth ;i ++){
      arrs[i].update();
    }
  }

}

function defineReactive(data,key,val){

  let dep = new Dep()
  Object.definePorperty(data,key,{
    enumerable: true,
    configurable: true,
    get:function(){
      dep.depend(); //     
      return val;
    }
    set :function (newVal){
      if(val === newVal){return}
      val = newVal;
      dep.notify(); //     
    }
  })
}

Observer 와 Watcher.
define Reactive 함 수 는 하나의 속성 을 get/set 형식 으로 만 변환 할 수 있 음 을 발 견 했 습 니 다.따라서 모든 key 를 재 귀적 으로 조사 하 는 데 도움 을 줄 관찰자 Observer 가 필요 합 니 다.

class Observer{
  constructor(value){
    this.value = value
  }
  if(!Array.isArry(value)){
    this.walk(value)
  }
  walk(obj){
    const keys = Object.keys(obj)
    for(let i = 0; i < keys.length ;i++){
      defineReactive(data,keys[i],obj[keys[i])
    }
  }
}

이런 의존 수집 이 완 료 된 후에 우 리 는 누구 에 게 알려 야 합 니까?어떻게 하면 보기 에 변화 업데이트 가 있 음 을 알 수 있 습 니까?우 리 는 구독 자 Watcher 를 실현 해 야 한다.
get 을 터치 할 때마다 dep 를 자신 에 게 가리 키 면 의존 도 를 수집 할 수 있 습 니 다.
set 할 때마다 Watcher 의 update 방법 을 반복 적 으로 호출 합 니 다.

class Watcher{
  constructor(vm,exp,cb){
    this.vm = vm;
    this.cb = cb;
    this.exp = exp;
    this.value = this.get();
  }
  get(){
    Dep.target = this;  //           
    var value = this.vm[exp];  //   getter，           
    Dep.target = null;  //     ，  
    return value;
  }
  update(){
    const oldVal = this.value;
    this.value = this.get();
    this.cb.call(this.vm,this.value,oldVal)
  }
}

Vue 인 스 턴 스 가 마 운 트 되면 템 플 릿 은 Watcher 를 연결 합 니 다.누구의 속성 이 바 뀌 면 응답 하 는 Watcher 를 알 리 고 Watcher 는 컴 파일 러 Compile 에 게 보기 업 데 이 트 를 알 립 니 다.
수사 에 서 는 대상 의 속성 에 대한 추가 와 삭 제 를 감청 할 방법 이 없다.
Vue 는 Object.definePorperty 를 통 해 대상 의 key 를 getter setter 형식 으로 바 꾸 어 검색 하지만 속성의 추가 와 삭 제 를 추적 할 수 없 기 때문에 Vue 에서 vm.get 을 제공 합 니 다.
Vue Object 의 변화 탐지 실현 코드 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue Object 변화 탐지 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 부탁드립니다!