Vue.js의 반응성은 어떻게 작용하는가?

Vue.js의 반응성은 어떻게 작용하는가?

기본적으로 구성요소가 있을 때는 "TransportComponenet.vue"라고 부르자, 그 구성요소에는 데이터()가 있고 내 속성은 carId, transportId이다.vue가 하는 일은 이러한 속성에 대한 게터와 세터를 만드는 것이다.이 구성요소의 관점에서, 나는 타이핑을 한다.{{carId + transportId}}그리고 또한{{carId * transportId}}.

내가 알기로는 부에가 내 견해에 와서 그들을 보고, 내가 게터들이 있는 곳이면 어디든지 (다){{carId+ transportId}}또는{{carId * transportId}}은이다. 에 등록한다그래서 vue가 와서 그것들을 구성 요소의 감시자에 등록한다.다음과 같은 세터를 사용할 때this.carId = 5이을 Vue는 이 속성에 대해 세터 기능을 수행하고 감시자에 이전에 저장되었던 기능(게이터)을 재평가한다.이것이 올바른 가정인가?

내가 이해할 수 없는 것은 Dep class와 Watcher class 사이에 어떤 관계가 존재하는가이다.나는 그들 둘 다 큰 역할을 한다는 것을 안다.나는 "어느 것이 언제 왜 어디로 가는지"라는 전체적인 설명을 정말 존중할 것이다.

반응성은 상태와 DOM 사이의 자동 동기화다.그것이 Vue와 React와 같은 뷰 라이브러리가 그들의 핵심에서 하려고 하는 것이다.그들은 그들만의 방법으로 그것을 한다.

나는 Vue의 반응도 시스템을 두 배로 본다.동전의 한 면은 DOM 업데이트 메커니즘이다.그 점을 먼저 살펴보자.

다음과 같은 템플릿이 있는 구성 요소가 있다고 가정해 보십시오.

<template>
    <div>{{ foo }}</div>
</template>

<script>
export default {
    data() {
        return {foo: 'bar'};
    }
}
</script>

이 템플릿은 렌더 함수로 변환된다.이는 vue-loader를 사용한 빌드 시간 동안 발생한다.위의 템플릿에 대한 렌더 함수는 다음과 같다.

function anonymous(
) {
    with(this){return _c('div',[_v(_s(foo))])}
}

렌더 기능은 브라우저에서 실행되며 실행되면 Vnode(가상 노드)를 반환한다.가상 노드는 DOM 노드의 청사진인 실제 DOM 노드를 나타내는 단순한 JavaScript 객체일 뿐이다.실행할 때 위의 렌더 함수는 다음과 같은 것을 반환한다.

{
    tag: 'div',
    children: ['bar']
}

그런 다음 Vue는 이 Vnode Blueprint에서 실제 DOM 노드를 생성하고 이를 DOM에 배치한다.

나중에, 라고 하자.foo의 값이 변경되고 렌더 기능이 다시 실행된다.그것은 다른 Vnode를 제공할 것이다.그런 다음 Vue는 새로운 Vnode를 이전 Vnode와 분산시키고 DOM에 필요한 변경 사항만 패치한다.

이것은 우리에게 컴포넌트의 최신 상태를 효율적으로 갱신할 수 있는 메커니즘을 제공한다.구성 요소의 상태(데이터, 소품 등)가 변경될 때 구성 요소의 렌더 기능이 호출될 때마다 전체 반응도 시스템을 갖추게 된다.

거기서 부에의 반응성 동전의 다른 면이 들어온다.그리고 그것은 반응적인 게터들과 세터들이다.

Object.defineProperty API를 아직 알지 못하는 경우, 지금이 바로 Object.defineProperty API를 이해할 수 있는 좋은 시간이 될 것이다.왜냐하면 Vue의 반응성 시스템은 이 API에 의존하기 때문이다.

TLDR; 그것은 우리가 가진 게터 및 세터 기능으로 물체의 속성 접근과 할당을 재정의할 수 있게 해준다.

Vue는 구성 요소를 인스턴스화하면 데이터 및 소품의 모든 속성을 살펴보고 다음 기능을 사용하여 다시 정의하십시오.Object.defineProperty.

그것이 실제로 하는 일은, 각각의 데이터와 소품 속성에 대해 게이터와 세터를 정의하는 것이다.이렇게 하면 해당 속성의 도트 액세스(이.data.foo)와 할당(이.data.foo = someNewValue)을 재정의한다.그래서 이 두 가지 행위가 그 사유지에서 발생할 때마다 우리의 재정의가 발동된다.그래서 우리는 그들을 어떻게 할 수 있는 갈고리가 있다.우리는 곧 이 일을 다시 시작할 것이다.

또한 각 속성에 대해 새로운 Dep() 클래스 인스턴스가 생성된다.라고 한다.Dep각 데이터 또는 소품 속성은 구성요소의 렌더 기능에 종속될 수 있기 때문이다.

그러나 먼저 각 구성요소의 렌더 기능이 감시자 내에서 호출된다는 것을 아는 것이 중요하다.그래서 감시자는 그것과 연관된 구성요소의 렌더 기능을 가지고 있다.Watcher는 다른 용도로도 사용되지만, 구성요소의 렌더 기능을 보고 있을 때는 렌더 watcher이다.감시자는 자신을 현재 실행 중인 감시자로 지정하며, 전세계적으로 접근 가능한 (Dep.target static 속성에서) 구성 요소의 렌더 기능을 실행한다.

이제 반응하는 게이터와 세터로 돌아가자.렌더 함수를 실행하면 상태 속성이 액세스된다.예시this.data.foo이것은 우리의 게터 오버라이드를 불러 일으킨다.,가가가면면면면dep.depend()라고 불린다.현재 실행 중인 감시자가 에 할당되어 있는지 점검한다.Dep.target, 그리고 만약 그렇다면, 그것은 감시자를 이 디프 객체의 가입자로 할당한다.라고 한다.dep.depend()왜냐하면 우리가 만들었기 때문이다.watcher에 의존하다dep.

_______________                       _______________
|             |                       |             |
|             |     subscribes to     |             |
|   Watcher   |    -------------->    |     Dep     |
|             |                       |             |
|_____________|                       |_____________|

어느 것이 와 같은가.

_______________                       _______________
|             |                       |             |
|  Component  |     subscribes to     |   it's      |
|  render     |    -------------->    |   state     |
|  function   |                       |   property  |
|_____________|                       |_____________|

나중에 상태 속성이 업데이트되면 세터가 호출되고 관련 dep 개체가 가입자에게 새 값에 대해 알린다.가입자는 렌더링 기능을 인지하고 있는 관찰자로, 렌더링 기능의 상태가 변경될 때 구성요소가 자동으로 호출되는 방식이다.

이것은 반응도 시스템을 완전하게 만든다.구성 요소의 상태가 변경될 때마다 렌더 기능을 호출할 수 있는 방법이 있다.그리고 일단 DOM을 효율적으로 업데이트할 수 있는 방법이 있다.

이렇게 해서 Vue는 상태 속성과 렌더 함수 사이에 관계를 만들었다.Vue는 상태 속성이 변경될 때 실행할 렌더 함수를 정확히 알고 있다.이는 매우 잘 확장되며 기본적으로 개발자의 손에서 성능 최적화 책임의 범주를 제거한다.Devs는 구성 요소 트리가 아무리 크더라도 구성 요소의 렌더링에 대해 걱정할 필요가 없다.이를 방지하기 위해 반응(예: React)은 PureComponent 또는 shouldComponentUpdate를 제공한다.Vue에서는 상태가 변경될 때 Vue가 어떤 구성 요소를 다시 렌더링해야 하는지 정확히 알고 있기 때문에 이 작업이 필요하지 않다.

하지만 이제 우리는 Vue가 어떻게 사물을 반응적으로 만드는지 알았기 때문에, 우리는 사물을 약간 최적화하는 방법을 생각할 수 있다.당신이 블로그 포스트 컴포넌트를 가지고 있다고 상상해보십시오.백엔드에서 데이터를 가져와 Vue 구성 요소를 사용하여 브라우저에 표시하십시오.그러나 블로그 데이터가 변경되지 않을 가능성이 높기 때문에 반응할 필요는 없다.그런 상황에서, 우리는 Vue에게 물체를 동결함으로써 그러한 데이터를 반응적으로 만드는 것을 건너뛰라고 말할 수 있다.

export default {
  data: () => ({
    list: {}
  }),
  async created() {
    const list = await this.someHttpClient.get('/some-list');

    this.list = Object.freeze(list);
  }
};

무엇보다도 Oject.freeze는 물체의 구성성을 무력화시킨다.다음을 사용하여 해당 개체의 속성을 다시 재정의할 수 없음Object.defineProperty그래서 Vue는 그러한 개체에 대한 전체 반응도 설정 작업을 생략한다.

게다가, 직접 Vue 소스 코드를 살펴본다면, 이 주제에 대해 아주 좋은 두 가지 자원이 있다.

1. Vue Mastery 고급 구성 요소 과정
2. FrontendMaster's Advanced Vue.js features from the ground Up by Evan You

간단한 가상 DOM 구현의 내역이 궁금하다면 Jason Yu의 블로그 게시물을 확인해 보십시오.

Scratch에서 간단한 가상 DOM 구축

참조URL: https://stackoverflow.com/questions/54476619/how-does-vue-js-reactivity-work-under-the-hood