[vue.js] nextTick은 무엇이며 VueJs에서 수행하는 작업

콘텐츠는 By Adrià Fontcuberta 에서 가져 왔습니다.

Vue 문서는 다음과 같이 말합니다.

Vue.nextTick ([콜백, 컨텍스트])

다음 DOM 업데이트주기 후에 콜백이 실행되도록 연기합니다. DOM 업데이트를 기다리기 위해 일부 데이터를 변경 한 후 즉시 사용하십시오.

흠 … 처음에 겁이 나더라도 걱정하지 말고 최대한 간단하게 설명하겠습니다. 하지만 먼저 알아야 할 두 가지 사항이 있습니다.

1. 그 사용법은 흔하지 않습니다. 은색 마법 카드 중 하나처럼. 여러 Vue앱 을 작성 하고 nextTick ()을 한두 번 만났습니다.

2. 실제 사용 사례를 살펴보면 이해하기가 더 쉽습니다. 아이디어를 얻은 후에는 두려움이 사라지고 벨트 아래에 편리한 도구가 있습니다.

그럼 가자.

$ nextTick 이해

우리는 프로그래머 죠? 우리는 사랑하는 분할 및 정복 접근 방식을 사용하여 설명을 .nextTick()조금씩 번역하려고 노력할 것 입니다. 다음으로 시작합니다.

콜백 연기

좋아, 이제 우리는 콜백을 수락한다는 것을 알고 있습니다. 따라서 다음과 같이 보입니다.

Vue.nextTick(function () {
  // do something cool
});

큰. 이 콜백은 다음까지 연기됩니다 (밀레 니얼 세대가 지연되었다고 말하는 방식입니다).

다음 DOM 업데이트주기.

괜찮아. 우리는 Vue가 DOM 업데이트를 비동기 적으로 수행 한다는 것을 알고 있습니다. 업데이트를 적용해야 할 때까지 이러한 업데이트를 “저장”하는 방법이 있습니다. 업데이트 대기열을 만들고 필요할 때 플러시합니다. 그런 다음 DOM이 “패치”되고 최신 버전으로 업데이트됩니다.

뭐?

다시 시도해 보겠습니다. this.potatoAmount = 3.Vue가 구성 요소 (및 DOM)를 자동으로 다시 렌더링하지 않는 것처럼 구성 요소가 정말 필수적이고 스마트 한 작업을 수행한다고 상상해보십시오 . 필요한 수정을 대기열에 추가합니다. 그런 다음 다음 “틱”(시계에서와 같이)에서 큐가 플러시되고 업데이트가 적용됩니다. 타다!

괜찮아! 따라서 데이터가 설정되고 DOM이 업데이트 된 직후에nextTick() 실행되는 콜백 함수를 전달하는 데 사용할 수 있다는 것을 알고 있습니다 .

앞서 말했듯이 … 그렇게 자주는 아닙니다. Vue, React 및 Google의 다른 하나를 구동하는 “데이터 흐름”접근 방식은 언급하지 않겠지 만 대부분의 경우 불필요하게 만듭니다. 그러나 때로는 일부 요소가 DOM에서 나타나거나 사라지거나 수정 될 때까지 기다려야합니다. 이것은 nextTick이 유용 할 때입니다.

DOM 업데이트를 기다리기 위해 일부 데이터를 변경 한 후 즉시 사용하십시오.

바로 그거죠! 이것은 Vue 문서가 우리에게 제공 한 마지막 정의입니다. 콜백 내에서 DOM이 업데이트되어 “가장 업데이트 된”버전과 상호 작용할 수 있습니다.

증명

좋아요, 좋아요. 콘솔을 보면 데이터 값이 nextTick의 콜백 내에서만 업데이트되는 것을 볼 수 있습니다.

const example = Vue.component('example', {
  template: '<p>{{ message }}</p>',
  data: function () {
    return {
      message: 'not updated'
    }
  },
  mounted () {
    this.message = 'updated'

        console.log(
        'outside nextTick callback:', this.$el.textContent
    ) // => 'not updated'

    this.$nextTick(() => {
      console.log(
        'inside nextTick callback:', this.$el.textContent
      ) // => 'not updated'
    })
  }
})


new Vue({
  el: '#app',
    render: h => h(example)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.js"></script>
<div id="app"></div>

사용 사례

에 대한 유용한 사용 사례를 정의 해 보겠습니다 nextTick.

구성 요소가 마운트 될 때 몇 가지 작업을 수행해야한다고 상상해보십시오. 그러나! 구성 요소뿐만 아니라. 또한 모든 하위 항목이 DOM에서 마운트되고 사용 가능할 때까지 기다려야합니다. 제길! 마운트 된 후크는 전체 구성 요소 트리가 렌더링되는 것을 보장하지 않습니다.

다음 DOM 업데이트주기를 기다릴 도구가 있다면…

하하 :

mounted() {
  this.$nextTick(() => {
    // The whole view is rendered, so I can safely access or query
    // the DOM. ¯\_(ツ)_/¯
  })
}

간단히 말해서

따라서 : nextTick데이터가 설정되고 DOM이 업데이트 된 후 함수를 실행하는 편리한 방법입니다.

DOM을 기다려야합니다. 변환을 수행해야하거나 외부 라이브러리가 해당 항목을로드 할 때까지 기다려야하기 때문일 수 있습니다. 그런 다음 nextTick을 사용하십시오.

어떤 사람들은 또한 데이터가 업데이트되었는지 확인하기 위해 단위 테스트에서 nextTick을 사용합니다. 이렇게하면 구성 요소의 “업데이트 된 버전”을 테스트 할 수 있습니다.

Vue.nextTick () 또는 vm. $ nextTick ()?

걱정하지 마세요. 둘 다 (거의) 동일합니다. Vue.nextTick()글로벌 API 메소드를 참조 vm.$nextTick()하고 인스턴스 메소드입니다. 유일한 차이점은 vm.$nextTick컨텍스트를 두 번째 매개 변수로 받아들이지 않는다는 것입니다. 항상 바인딩됩니다 this(인스턴스 자체라고도 함).

시원함의 마지막 조각

를 nextTick반환 Promise하므로 async/await예제를 완벽하게 개선하고 개선 할 수 있습니다 .

async mounted () {
    this.message = 'updated'
    console.log(this.$el.textContent) // 'not updated'
    await this.$nextTick()
    console.log(this.$el.textContent) // 'updated'
}

답변

// modify data
vm.msg = 'Hello'
// DOM not updated yet
Vue.nextTick(function () {
  // this function is called when vue has re-rendered the component.
})

// usage as a promise (2.1.0+, see note below)
Vue.nextTick()
  .then(function () {
      // this function is called when vue has re-rendered the component.
})

mounted() {
  this.one = "One";

  setTimeout(() => {
    this.two = "Two"
  }, 0);

  //this.$nextTick(()=>{
  //this.two = "Two"
  //})}