nexttick 후에도 vue가 데이터를 업데이트하지 않는 이유는 무엇입니까?

nexttick 후에도 vue가 데이터를 업데이트하지 않는 이유는 무엇입니까?

vuejs nexttick 메서드에 대해 알아보려고 하는데 이 예에서 nexttick 후에도 메시지가 업데이트되지 않는 이유를 잘 모르겠습니다.

new Vue({
  el: '#app',
  data: {
    message: 'one'
  },
  created() {
    this.message = 'two';
    this.$nextTick(() => {
      this.message = 'three';
    });
    this.message = 'four'
  }
})

를 사용하여 에코하면

<div id="app">
  <p>{{ message }}</p>
</div>

나는 보기만 한다threenexttick()은 데이터를 빠르게 변경하기 때문에 1과 2가 표시되는 이유는 이해하지만, 그 이유는 무엇입니까?four대신 표시되지 않습니까?

전화할 때$nextTick()다음 틱에서 실행되도록 내부 기능을 스케줄링합니다.단, 호출하고 있는 함수는 $nextTick()이 함수는 에 전달되기 전에 완료됩니다.nextTick()호출됩니다.

여기 의 공식 문서가 있습니다.$nextTick() https://vuejs.org/v2/api/ #vm-nextTick

다음 DOM 업데이트사이클 후에 실행되는 콜백을 연기합니다.일부 데이터를 변경한 후 DOM 업데이트를 대기하기 위해 즉시 사용하십시오.이는 글로벌 Vue.nextTick과 동일하지만 콜백의 컨텍스트가 이 메서드를 호출하는 인스턴스에 자동으로 바인드된다는 점이 다릅니다.

this.message = 'three';마지막으로 실행되기 때문에 항상 "3"이 표시됩니다.

코드는 실제로 다음 순서로 실행됩니다.

this.message = 'two';
this.message = 'four'
//then in the next tick of the event loop / DOM update which is likely instantaneous
this.message = 'three';

파일 내 코드 순서는 Javascript 엔진에 의해 실제로 실행되는 순서를 결정하지 않습니다.

에 대한 당신의 질문에 따르면

그런데 왜 4개가 안 나오죠?

매크로태스크 마이크로태스크 문제예요nextTick을 사용하면 브라우저 지원을 약속할 수 있습니다.그러면 Vue는 기능을 실행하기 위해 그것을 사용할 것입니다.

그리고 약속 때문에 당신의 nextTick 기능은 실제로 UI 렌더 전에 마이크로태스크로 분류될 것입니다.

set Timeout은 macrotask로 분류되며 UI 렌더 후 다음 이벤트 루프에서 기능이 수행되며 잠시 동안 "4"가 표시됩니다.

DOM이 UI 렌더와 동일하지 않음

언급URL : https://stackoverflow.com/questions/47840035/why-doesnt-vue-update-data-after-nexttick