Vue.js의 응답성 원칙

Vue.js의 응답성 원칙은 핵심 기능 중 하나입니다. Vue.js는 데이터 반응성을 달성하기 위해 "데이터 하이재킹"이라는 기술을 사용합니다. 이 기술은 데이터 변경을 감지하고 데이터가 변경되면 관련 뷰를 자동으로 업데이트할 수 있습니다.

특히 Vue.js에서 데이터 속성을 정의하면 Vue.js는 이를 getter 및 setter 함수로 변환합니다. 속성에 액세스하면 Vue.js는 getter 함수를 호출하여 속성 값을 반환합니다. 이 속성의 값을 수정하면 Vue.js는 setter 함수를 호출하고 관련 뷰에 업데이트를 알립니다.

Vue.js는 데이터 하이재킹을 달성하기 위해 "종속성 추적"이라는 기술을 사용합니다. 속성에 액세스하면 Vue.js는 해당 속성이 의존하는 모든 Watcher 개체를 "종속성 목록"에 추가합니다. 속성 값이 변경되면 Vue.js는 속성의 "종속성 목록"을 순회하고 모든 Watcher 객체에 업데이트하도록 알립니다.

Watcher 객체는 Vue.js의 또 다른 핵심 개념입니다. 뷰를 업데이트하는 데 사용되는 개체입니다. 템플릿에서 데이터 속성을 사용하면 Vue.js는 자동으로 Watcher 객체를 생성하여 속성의 변경 사항을 추적합니다. 이 속성의 값이 변경되면 Watcher 개체는 관련 뷰를 업데이트하는 일을 담당합니다.

<div id="app">
  <p>{
   
   { message }}</p>
  <button @click="updateMessage">Update Message</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    updateMessage: function () {
      this.message = 'Hello World!'
    }
  }
})

위 코드에서는 Vue 인스턴스를 정의하고 data옵션을 통해 message이름이 지정된 데이터 속성을 정의합니다. message템플릿의 속성을 사용 하고 message버튼의 클릭 이벤트 핸들러에서 속성 값을 수정했습니다.

Vue.js는 인스턴스화될 때 data옵션에 정의된 모든 속성을 getter 및 setter 함수로 변환 하고 이러한 함수를 Vue 인스턴스에 바인딩합니다. message속성에 액세스하면 Vue는 getter 함수를 호출하고 message속성 값을 반환합니다. message속성 값을 수정하면 Vue는 setter 함수를 호출하고 관련 뷰에 업데이트를 알립니다.

"메시지 업데이트" 버튼을 클릭하면 속성 값을 "Hello World!"로 수정하는 updateMessage메서드가 호출됩니다. message속성이 Vue에 의해 반응형 속성으로 변환 되었으므로 Vue는 속성 값이 발생하는 message시점을 자동으로 감지합니다 .message

Vue.js의 반응 원리는 데이터 속성을 getter 및 setter 함수로 변환하고 종속성 추적 기술을 사용하여 달성됩니다. 이를 통해 Vue는 데이터 변경 사항을 자동으로 감지하고 관련 뷰를 자동으로 업데이트할 수 있습니다.