반응성이 Vue에서 어떻게 작동하는지.js?

전단 개발자의 세계에서'반응성'은 모든 사람이 사용하는 것이지만 이해하는 사람은 드물다.실제로 이것은 누구의 잘못이 아니다. 왜냐하면 프로그래밍에서 몇 사람이 반응성에 대해 서로 다른 정의를 가지고 있기 때문이다.시작하기 전에 제가 먼저 앞부분 프레임의 측면에서 정의를 드리겠습니다.
"JavaScript 프레임워크에서 반응성이란 애플리케이션 상태의 변화가 DOM에 자동으로 반영되는 현상입니다."

Vue의 반응회사 명

Vue의 반응js는 소프트웨어 패키지에 첨부된 물건입니다.
다음은 Vue의 반응 예입니다.js, 양방향 귀속(사용v-model,
위의 예에서 데이터 모델 층의 변경 사항을 똑똑히 볼 수 있습니다.

    new Vue({
      el: "#app",
      data: {
        message: ""
      },
    })

뷰 레이어에 자동으로 반영,

    <div id="app">
      <h1>Enter your message in the box</h1>
      <p>{{ message }}</p><br>
      <input placeholder="Enter message" v-model="message" />
    </div>

Vue에 익숙한 경우js, 그럼 익숙해졌나 봐요.단, 바닐라 JS에서는 일의 작업 방식이 다르다는 것을 기억해야 합니다.내가 하나의 예로 설명할게.여기서 위의 Vue를 다시 만들었습니다.vanilla js의 js 반응성 예시.
메시지를 입력할 때 HTML 보기에서 자동으로 다시 표시되는 메시지를 보지 못하기 때문에 JavaScript가 여기서 자연스럽게 반응하지 않는 것을 볼 수 있습니다.왜 이러지?저기, 뷔가 뭐예요?js 있어요?
답을 얻기 위해서는 잠재적인 반응성 시스템을 알아야 한다.일단 우리가 명확한 이해를 얻게 되면, 우리는 vanilla JavaScript로 우리의 반응성 시스템을 다시 만들려고 시도할 것이다. 이것은 Vue와 유사할 것이다.js 반응성 시스템.

Vue。js 반응성 시스템

처음부터 설명해 드릴게요.

첫 렌더링

첫 번째 렌더링 시 데이터 속성이 터치 (접근 데이터 속성을 터치라고 부른다) 이면 getter 함수를 호출합니다.
Getter:Getter 함수는 이 데이터 속성을 의존항으로 수집하기 위해 관찰 프로그램을 호출합니다.
(데이터 속성이 의존항이라면 이 속성의 값이 바뀔 때마다 일부 목표 코드/함수를 실행한다는 것을 의미합니다.)

관찰자

관찰 프로그램을 호출할 때마다, 이 데이터 속성을 getter에서 호출하는 의존항으로 추가합니다.관찰자는 또한 구성 요소 렌더링 함수를 호출하는 것을 책임진다.

어셈블리 렌더링 기능

실제로 Vue의 구성 요소 렌더링 함수는 그리 간단하지 않지만, 이해하기 위해서는 업데이트된 데이터 속성을 포함하고 보기에 표시되는 가상 DOM 트리가 되돌아왔다는 것만 알아야 한다.

데이터 변경!

이 부분은 기본적으로 Vue 반응성의 핵심이다.js.따라서 데이터 속성 (의존항으로 수집) 을 변경할 때 setter 함수를 호출합니다.
Setter: Setter 함수는 데이터 속성이 변경될 때마다 관찰자에게 알립니다.관찰자가 구성 요소 렌더링 기능을 실행하는 것을 알고 있습니다.따라서 데이터 속성에서 변경된 내용이 뷰에 표시됩니다.
이 반응 시스템을 vanilla JavaScript로 다시 만들 것이기 때문에 워크플로우를 잘 알았으면 합니다.

Vue를 다시 생성합니다.vanilla JavaScript의 js 반응 시스템

현재 우리는 반응성 시스템을 재건하고 있다. 가장 좋은 방법은 그 구축 블록을 하나하나 이해하는 것이다. (코드에서) 최종적으로 우리는 모든 구성 요소를 조립할 수 있다.

데이터 모델

임무: 우선, 우리는 데이터 모델이 필요합니다.
솔루션:
우리는 어떤 데이터를 필요로 합니까?앞에서 본 Vue 예시를 다시 만들고 있기 때문에 완전히 같은 데이터 모델이 필요합니다.

    let data = {
        message: ""
    }

목표 함수

작업: 데이터 모델이 변경될 때 실행될 목표 함수가 필요합니다.
솔루션:
목표 함수를 해석하는 가장 간단한 방법은
"안녕하세요, 저는 데이터 속성message입니다. 목표 함수renderFunction()가 있습니다. 제 값이 변하기만 하면 목표 함수가 실행됩니다.
PS: 뿐만 아니라 여러 개의 목표 함수를 가질 수 있습니다 renderFunction()"
따라서 우리는 target라는 전역 변수를 설명합니다. 이것은 우리가 모든 데이터 속성의 목표 함수를 기록하는 데 도움을 줄 것입니다.

    let target = null

의존류

작업: 데이터 속성을 의존항으로 수집하는 방법이 필요합니다.
지금까지 우리는 데이터와 목표 함수의 개념만 있고 목표 함수는 데이터 값이 변화할 때 운행한다.그러나 우리는 각 데이터 속성의 목표 함수를 각각 기록하는 방법이 필요하다. 이렇게 하면 데이터 속성이 변경될 때 이 데이터 속성을 위해 단독으로 저장된 목표 함수만 실행할 수 있다.
솔루션:
우리는 모든 데이터 속성의 목표 함수에 단독 저장 공간을 제공해야 한다.
만약 우리가 다음과 같은 데이터를 가지고 있다면,

    let data = {
        x: '',
        y: ''
    }

그리고 우리는 x 과 y 두 개의 단독 저장소를 원한다.그렇다면 왜 의존류를 정의하지 않고 모든 데이터 속성은 유일한 실례를 가질 수 있습니까?
이것은 의존 클래스를 정의함으로써 모든 데이터 속성이 자신의 의존 클래스 실례를 가질 수 있도록 할 수 있다.따라서 모든 데이터 속성은 목표 함수에 자신의 저장 공간을 분배할 수 있다.

    class Dep {
        constructor() {
        this.subscribers = []
      }
    }

의존류는 subscribers 수조를 가지고 있으며, 이 수조는 목표 함수의 저장에 사용될 것이다.

이제 우리는 의존류를 완전히 완전하게 하기 위해 두 가지 일이 필요하다.

depend(): 이 함수는 목표 함수를 subscribers 진열에 밀어넣습니다.

notify(): 이 함수는 subscribers 그룹에 저장된 모든 목표 함수를 실행합니다.

    class Dep {
        constructor() {
        this.subscribers = []
      }
      depend() {
        // Saves target function into subscribers array
        if (target && !this.subscribers.includes(target)) {
            this.subscribers.push(target);
        }
      }
      notify() {
        // Replays target functions saved in the subscribers array
        this.subscribers.forEach(sub => sub());
      }
    }

변경 내용 추적

작업: 데이터 속성이 변경될 때 이 속성의 목표 함수를 자동으로 실행하는 방법을 찾아야 합니다.
솔루션:
지금까지

데이터

데이터 변경 시 필요한 사항

의존항 수집 메커니즘

다음으로 우리가 필요로 하는 것은,

데이터 속성을 터치할 때 터치하는 방법depend().

데이터 속성의 변경 사항을 추적하고 notify() 트리거하는 방법.

이 점을 실현하기 위해서, 우리는 getter와setter를 사용할 것이다.Object.defineProperty() 이러한 데이터 속성에 getter와setter를 추가할 수 있습니다.

    Object.defineProperty(data, "message", {
        get() {
        console.log("This is getter of data.message")
      },
      set(newVal) {
        console.log("This is setter of data.message")
      }
    })

따라서 우리는 모든 사용 가능한 데이터 속성에 getter와setter를 정의할 것입니다. 아래와 같습니다.

    Object.keys(data).forEach(key => {
        let internalValue = data[key]

      // Each property gets a dependency instance
      const dep = new Dep()

      Object.defineProperty(data, key, {
        get() {
            console.log(`Getting value, ${internalValue}`)
            dep.depend() // Saves the target function into the subscribers array
          return internalValue
        },
        set(newVal) {
            console.log(`Setting the internalValue to ${newVal}`)
            internalValue = newVal
          dep.notify() // Reruns saved target functions in the subscribers array
        }
      })
    })

또한 getter에서 호출되는 것을 볼 수 있습니다. 데이터 속성이 터치될 때 getter 함수가 호출되기 때문입니다.
데이터 속성의 값이 변경될 때setter 함수를 호출합니다.

관찰자

작업: 데이터 속성의 값이 변경될 때 실행해야 하는 코드 (목표 함수) 를 봉인하는 방법이 필요합니다.
솔루션:
지금까지 우리는 이 시스템에서 데이터 속성이 터치될 때 의존항으로 추가되는 시스템을 만들었습니다. 이 데이터 속성에 변경 사항이 있으면 모든 목표 함수가 실행됩니다.
그러나 목표 함수의 코드로 이 과정을 초기화하지 못한 것은 여전히 부족하다.따라서 목표 함수의 코드를 봉인하고 프로세스를 초기화하기 위해 관찰 프로그램을 사용할 것입니다.
관찰자는 하나의 함수로 다른 함수를 매개 변수로 하고 다음 세 가지를 수행한다.

매개 변수에서 얻은 익명 함수를 사용하여 golbaldep.depend() 변수를 분배합니다.

운행 dep.notify().(이렇게 하면 프로세스가 초기화됩니다.)

재양도target

    let watcher = function(func){
      // Here, a watcher is a function that encapsulates the code
      // that needs to recorded/watched.
      target = func // Then it assigns the function to target
      target() // Run the target function
      target = null // Reset target to null
    }

현재 우리가 함수를 관찰자에게 전달하고 실행하면 반응성 시스템이 완성되고 과정이 초기화됩니다.

    let renderFunction = () => {
        // Function that renders HTML code.
        document.getElementById("message").innerHTML = data.message;
    }

    watcher(renderFunction);

우리 끝났어!

이제 위의 모든 코드를 조립하여 Vue를 성공적으로 다시 만들었습니다.vanilla JavaScript의 js 반응 시스템입니다.이것은 내가 당신들에게 보여준 첫 번째 사례의 실현입니다. 이 반응성 시스템을 사용하면