[Udemy Vue 완벽가이드 Section5] 60. Vue의 반응성 소개

input창에 입력값을 작성하고, 'Set Text'버튼을 클릭 →  아래 출력된다.

이는 data, methods, 해당 메서드를 트리거하는 event binding, message 데이터를 출력하는 보간의 합작품!

 

index.html

<section id="app">
  <h2>How Vue Works</h2>
  <input type="text" @input="saveInput" />
  <button @click="setText">Set Text</button>
  <p>{{ message }}</p>
</section>

 

app.js

const app = Vue.createApp({
  data() {
    return {
      currentUserInput: "",
      message: "Vue is great!",
    };
  },
  methods: {
    saveInput(event) {
      this.currentUserInput = event.target.value;
    },
    setText() {
      this.message = this.currentUserInput;
    },
 }),

 

 

입력한 텍스트를 바꾸고, 다시 'Set Text'버튼을 누르면, 화면이 Vue를 통해 업데이트 된다.

Vue의 내장된 반응성으로, 핵심 기능 중 하나.

 

본질적으로 Vue는 중요한 일을 하나 한다.

→ data에 정의한 내용을 Vue가 지속적으로 추적한다.

 

Vue는 이 data 객체의 모든 프로퍼티를 전역 프로퍼티와 합쳐서 내부에서 관리하는 하나의 객체로 만든다. 이 때, 메서드도 해당 객체에 합쳐진다.

이런 작업이 Vue의 내부에서 이루어진다.

또한, this가 해당 전역객체를 가리키도록 한다.

 

data에 대해 Vue가 하는 작업 중 가장 핵심적인 일은, 

프로퍼티를 JavaScript의 기능인 프록시로 래핑해서 data 객체를 반응형 data 객체로 바꾸는 일.

 

JavaScript에는 내장 기능인 '프록시'가 있다. Vue가 내부에서 이를 활용하여 data 프로퍼티를 래핑하고, message와 같이 새 값이 할당될 때마다 알리는 작업을 한다.

 

message에 새로운 값을 설정할 때마다 해당 값이 다른 data 프로퍼티든, 하드코딩된 문자열이든, Vue가 알아차린다.

Vue가 새로운 값의 할당을 모른다면, 화면에 나오는 내용을 업데이트할 수 없다. 

Vue가 이를 인식하면, Vue는 제어하는 HTML 코드를 스캔하고 변경 사항이 있는 프로퍼티가 있음을 확인한다.

ex: 여기서는 {{  message }}가 바뀜을 확인한다.

 

변경사항이 있다는 것을 인식하면, 사용자가 보는 화면이 될 렌더링된 페이지에서 해당 동적 콘텐츠가 표시되는 올바른 위치를 찾은 다음, 변경 사항에 따라 화면에 나오는 페이지를 업데이트한다.

이것이 Vue가 내부적으로 실행하는 내장 반응성 기능.

 

작동원리는 어떻게 될까? →  프록시라는 기능이 사용된다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.