vue 응답 식 원리 와 양 방향 데이터 의 깊이 있 는 분석

object.defineProperty 구현 응답 식 알 아 보기
observe/watcher/dep 가 구체 적 으로 무엇 을 가리 키 는 지 잘 알 고 있 습 니 다.
게시 구독 모드 및 그 해결 에 대한 구체 적 인 문제 파악
자바 script 에서 데이터 응답 식 을 실현 하 는 데 보통 두 가지 방안 이 있 는데 각각 vue 2.x 와 vue 3.x 가 사용 하 는 방식 에 대응 합 니 다.그들 은 각각 다음 과 같 습 니 다.
대상 속성 차단(vue2.x)Object.defineProperty
대상 전체 에이전트(vue3.x)프 록 시
제시:다음은 본 글 의 본문 내용 이 고 다음 사례 는 참고 할 수 있 습 니 다.
vue-응답 식 이 뭐 예요?
Vue 의 가장 독특한 특성 중 하 나 는 비 침입 적 인 응답 시스템 입 니 다.데이터 모델 은 일반적인 자 바스 크 립 트 대상 일 뿐이다.수정 할 때 보 기 는 업 데 이 트 됩 니 다.이 때문에 상태 관 리 는 매우 간단 하고 직접적 이지 만 그 작업 원 리 를 이해 하 는 것 도 마찬가지 로 중요 하 다.그러면 흔히 볼 수 있 는 문 제 를 피 할 수 있다.이 장 에서 우 리 는 연구 할 것 이다.
Vue 응답 시스템 의 밑바닥 디 테 일.
vue-응답 식 은 어떻게 실현 되 었 습 니까?
데이터 응답 식:데이터 모델 은 일반적인 자 바스 크 립 트 대상 일 뿐 입 니 다.우리 가 데 이 터 를 수정 할 때 보 기 는 업 데 이 트 됩 니 다.잦 은 DOM 작업 을 피하 고 개발 효율 을 향상 시 킵 니 다.이것 은 Jquery 와 달리 Jquery 는 잦 은 조작 Dom 입 니 다.
양 방향 데이터 바 인 딩 에 대한 이해
데이터 가 바 뀌 고 보기 가 바 뀌 며 보기 가 바 뀌 면 데이터 도 달라 집 니 다.(이 말 을 통 해 양 방향 바 인 딩 에 데이터 응답 식 내용 이 포함 되 어 있 음 을 알 수 있 습 니 다)
우 리 는 v-model 을 사용 하여 폼 요소 에 양 방향 데이터 바 인 딩 을 만 들 수 있 습 니 다.
데이터 구동 은 Vue 의 가장 독특한 특성 중의 하나 이다.
개발 과정 에서 데이터 자체 에 만 관심 을 가 져 야 하고 데이터 가 보기 에 어떻게 나타 나 는 지 에 관심 을 가 질 필요 가 없다.주류 의 MVVM 프레임 워 크 는 모두 데이터 응답 식 과 양 방향 연결 을 실 현 했 기 때문에 데 이 터 를 DOM 에 연결 할 수 있다.
vue.js 에서 데이터 구동 이란 데이터 가 변화 할 때 사용자 인터페이스 에 해당 하 는 변화 가 발생 하 는 것 입 니 다.개발 자 는 dom 을 수 동 으로 수정 할 필요 가 없습니다.
데이터 구동 에 대한 이해:
그렇다면 vuejs 는 어떻게 이런 데이터 구동 을 실현 합 니까?
vue 가 데이터 양 방향 연결 을 실현 하 는 것 은 주로 데이터 납치 와 게시 자-구독 자 모드 를 결합 하 는 방식 으로 Object.defineProperty()를 통 해 각 속성의 setter,getter 를 납치 하고 데이터 가 변동 할 때 구독 자 에 게 메 시 지 를 발표 하여 해당 하 는 감청 회 조 를 촉발 하 는 것 이다.일반 자바 script 대상 을 Vue 인 스 턴 스 로 전송 할 때 Vue 는 속성 을 옮 겨 다 니 며 Object.defineProperty 로 getter/setter 로 변환 합 니 다.사용 자 는 getter/setter 를 볼 수 없 지만 내부 에 서 는 Vue 추적 을 의존 하 게 하고 속성 이 접근 되 고 수정 되 었 을 때 변 화 를 알 립 니 다.
vue 데이터 양 방향 연결
MVVM 을 데이터 바 인 딩 의 입구 로 삼 아 Observer,Compile,Watcher 세 가 지 를 통합 시 키 고 Observer 를 통 해 자신의 model 의 데이터 변 화 를 감청 하 며 Compile 을 통 해 컴 파일 템 플 릿 명령(vue 에 서 는{}}을 분석 하 는 데 사 용 됩 니 다)을 분석 하고 최종 적 으로 watcher 를 이용 하여 observer 와 Compile 간 의 통신 다 리 를 구축 하여 데이터 변화->보기 업데이트 에 도달 합 니 다.보기 인 터 랙 션 변화(input)->데이터 model 은 양 방향 바 인 딩 효 과 를 변경 합 니 다.
vue-양 방향 데이터 에 대한 분석?/v-model 양 방향 데이터 바 인 딩 원리
코드 는 다음 과 같 습 니 다(예시).

  <script>
    // Object     value   
    let data = {
      name: '  ',
      age: 18
    }

    Object.keys(data).forEach(key => {
      defineReactiveProperty(data, key, data[key])
    })

    function defineReactiveProperty(data, key, value) {
      Object.defineProperty(data, key, {
        // get  
        get() {
          return value
        },
        // set   
        set(newVaue) {
          if (newVaue === value) {
            return
          }
          value = newVaue
          compine()
        }
      })
    }
    compine()
  </script>
</body>

</html>

 
 function compine () {
  //   document.querySelect('#app').childNodes   app       
  const nodes = document.querySelector('#app').childNodes
  //                            foreach 
  // console.log(nodes)

  nodes.forEach(item => {
    //      item html:49 <input type=​"text" v-model=​"name">​    input    
    // console.log(item)
    //           ,  nodes         ‘text' nodeType 3，   nodetype 1，if         
   if (item.nodeType === 1){
     const attrs = item.attributes
      // console.log(attrs)  {0: type, 1: v-model, type: type, v-model: v-model, length: 2}         
    Array.from(attrs).forEach( arr => {
        // console.log(arr) //  texgt= 'text' v-mode: 'name' ，     v-model
        if (arr.nodeName === 'v-model'){
            item.value = data[arr.nodeValue]
            item.addEventListener('input',e => {
              console.log(e.target.value)
              //  
              data[arr.nodeValue] = e.target.value
            })
        }
      })
   }
  })
}

총결산

데이터 응답 식 의 실현 은 대상 속성 차단 일 뿐 입 니 다.저 희 는 Object.defineProperty 를 사용 하여 이 루어 집 니 다.vue 3 에서
Proxy 대상 에이전트 방안 으로 최적화면접 보전 에서 언급 한 몇 가지 전문 명사
observe 대상 은 데 이 터 를 응답 식 으로 처리 하 는 대상 을 말한다.
watcher 는 데이터 가 변 한 후의 업데이트 함수(vue 의 watcher 는 두 가지 가 있 는데 하 나 는 보 기 를 업데이트 하 는 watcher 이 고 하 나 는 watch 설정 항목 을 통 해 설명 하 는 watcher)를 말 합 니 다.
dep 는 게시 구독 을 통 해 이 루어 진 수집 업데이트 함수 와 업데이트 함수 의 대상 을 말 합 니 다4.567917.명령 이 실현 하 는 핵심 은 템 플 릿 컴 파일 을 통 해 표 지 를 찾 은 다음 에 데 이 터 를 묶 고 데이터 가 변화 한 후에 다시 놓 는 것 이다4.567917.구독 모델 을 발표 하 는 본질은 한 쌍 의 많은 문 제 를 해결 하 는 것 이다.vue 에서 데이터 변 화 를 실현 한 후의 정확 한 업데이트vue 응답 식 원리 와 양 방향 데이터 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 응답 식 원리 와 양 방향 데이터 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!