vue 데이터 제어 보기 의 원리 분석 실현

이 편 은 주로 vue 의 중요 한 지식 점 을 말 하 는데 쌍방 향 데이터 연결 이 어떻게 실현 되 는 지 를 말한다.처음에 이 부분의 내용 을 볼 때 비교적 막막 하고 다음 과 같은 몇 가지 점 에서 막막 하 다.

이 내용 은 어느 쪽 에서 시작 해 야 합 니까

데이터 변 화 는 어떻게 시각 층 의 업 데 이 트 를 구동 하 는 지

문제 풀이 심화 지식 점

어느 쪽 부터 시작 해서 응답 식 원 리 를 봅 니까?
제 가 여기 서 세 가지 방향 을 제공 합 니 다.이 세 가지 방향 에서 watcher 의 사용 을 볼 수 있 습 니 다.그리고 watcher 의 사용 과정 에서 observer 와 dep 가 섞 인 다음 에 점대 면 으로 전 체 를 정리 합 니 다.
초기 화 된 render 프로 세 스 를 보 러 갑 니 다.
lifecycle 이 파일 의 mount Component 방법 에서 watcher 를 만 들 었 습 니 다.코드 는 다음 과 같 습 니 다:

new Watcher(vm, updateComponent, noop, {
 before () {
  if (vm._isMounted && !vm._isDestroyed) {
  callHook(vm, 'beforeUpdate')
  }
 }
}, true /* isRenderWatcher */)

이 인삼 을 통 해 하 나 를 정리 할 수 있다.

watch 각도 에서 보기

컴퓨터 의 각도 에서 본다

데이터 변 화 는 어떻게 시각 계층 의 업 데 이 트 를 구동 합 니까?
이 문 제 는 사실 두 가지 측면 으로 나 누 어 볼 수 있다.
데이터 가 변 한 것 을 어떻게 압 니까?
어떤 보기 가 데이터 와 관련 이 있다 는 것 을 어떻게 알 고 데이터 변 화 를 어떻게 알 았 는 지 업데이트 합 니까?
데이터 납치
데이터 납치 의 두 가지 방식

Object.defineProperty
proxy

Vue 3.0 의 데이터 납 치 는 proxy 로 이 루어 졌 으 며,현재 읽 고 있 는 소스 코드 에 서 는 모두Object.defineProperty이런 방식 으로 이 루어 졌 다.
어떤 보기 가 데이터 와 관련 이 있다 는 것 을 어떻게 알 고 그 를 업데이트 합 니까?
정 답:수집 및 구독 업데이트 의존
상세 한 해석 과정:그림 으로 응답 식 원 리 를 알려 드 립 니 다.
여기 에는 단지 하나의 간단 한 예 와 그림 으로 전체 절 차 를 명확 하 게 한다.

<div id="app">
 {{ message }}
 {{ message1 }}
 <input type="text" v-model="message">
 <div @click="changeMessage">  message</div>  
</div>

var app = new Vue({
 el: '#app',
 data: {
  message: '1',
  message1: '2',
 },
 methods: {
  changeMessage() {
   this.message = '2'
  }
 },
 watch: {
  message: function(val) {
   this.message1 = val
  }
 }
})

수집 흐름 도 의존

수집 에 의존 하 는 최종 결과:

구독 업데이트 흐름 도:

。
문 제 를 풀 고 지식 을 심화 시키다.
제목 은 다음 과 같다.
1.Vue 의 응답 식 원 리 를 약술 한다.
2.계산 속성 과 watch 의 차이
3.Vue 에서 data 의 대상 속성 에 새로운 속성 을 추가 할 때 발생 하 는 일 은 어떻게 해결 합 니까?
1 등 과 2 등 은 여기 서 설명 하지 않 는 다.
Vue 에서 data 의 대상 속성 에 새로운 속성 을 추가 할 때 발생 하 는 일 은 어떻게 해결 합 니까?
우 리 는 업 무 를 할 때 이런 상황 을 자주 만 나 는데 나 는 간단 한 예 를 들 었 다.

<template>
 <div>
 <ul>
  <li v-for="value in obj" :key="value">
  {{value}}
  </li>
 </ul>
 <button @click="addObjB">  obj.b</button>
 </div>
</template>
<script>
export default {
 data () {
 return {
  obj: {
  a: 'obj.a'
  }
 }
 },
 methods: {
 addObjB () {
  this.obj.b = 'obj.b'
  console.log(this.obj)
 }
 }
}
</script>
<style></style>

수집 절차 의존:

이 를 통 해 알 수 있 듯 이 renderWatch 는 수집Dep(obj)과Dep(Obj.a)이 있 지만 우리 가 Obj 를 바 꾸 었 을 때 보기 의 업 데 이 트 를 촉발 하지 않 았 다.왜냐하면 우 리 는 obj 의 값 을 바 꿀 때 Dep(obj)를 촉발 하지 않 았 기 때문이다.
문제 가 발생 하 는 본질 적 인 원인:
1.vue 는 state.js 파일 의 initData 방법 에서 data 속성 중의 모든 key 를 응답 식 속성 으로 바 꿉 니 다.
2.보 기 는 렌 더 링 과정 에서 renderWatcher 를 사용 하 는 값 의 dep 에 수집 하여 업데이트 에 의존 하기 편리 합 니 다(모 르 는 것 은 다시 가서 수집 절차 에 의존 하 는 것 을 보 세 요)
3.속성 을 추가 할 때 이 속성 은 응답 식 속성 이 아 닙 니 다.
그럼 어떻게 바 꿀 까?

addObjB () {
 // this.obj.b = 'obj.b'
 this.$set(this.obj, 'b', 'obj.b')
 console.log(this.obj)
}

총결산
이 글 은 년도 총결산 의 시작 으로 초기 화 부분,render 부분 과 patch 부분 을 계속 정리 할 것 이다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 주 실 겁 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
만약 당신 이 본문 이 당신 에 게 도움 이 된다 고 생각한다 면,전 재 를 환영 합 니 다.번 거 로 우 시 겠 지만 출처 를 밝 혀 주 십시오.감사합니다!