nextTick은 무엇이며 VueJs에서 수행하는 작업

nextTick은 무엇이며 VueJs에서 수행하는 작업

---

문서를 읽었습니다. 나는 어떤 데이터, 계산, 감시, 방법을 알고 싶습니다 nextTick()vuejs에서 무엇 을 사용합니까?

---

nextTick을 사용하면 데이터를 변경하고 VueJS가 데이터 변경을 기반으로 DOM을 업데이트 한 후 브라우저가 변경 사항을 페이지에하기 전에 작업을 수행 할 수 있습니다.

일반적으로 개발자는 사용 JavaScript 함수 인 setTimeout 을 사용 하여 작동 동작을 수행합니다. 그러나 사용하는 경우 setTimeout제공을 통해 사용자에게 제어권이 다시 제공되기 전에 브라우저에 대한 제어권이 포기됩니다.

일부 데이터를 변경 가정 해 보겠습니다. Vue는 데이터를 기반으로 DOM을 업데이트합니다. DOM 변경 사항은 아직 브라우저에 의해 화면에 기술되지 않은 브라우저에. 을 경우 nextTick지금 호출이 호출됩니다. 그런 다음 브라우저가 페이지를 업데이트합니다. 을 사용하면 setTimeout지금만이 호출됩니다.

다음과 같은 작은 구성 요소를 만들어이 동작을 실행할 수 있습니다.

<template>
  <div class="hello">
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
        msg: 'One'
    }
  },
  mounted() {
      this.msg = 'Two';

      this.$nextTick(() => {
          this.msg = 'Three';
      });
  }
}
</script>

로컬 서버를 실행하십시오. 메시지 Three가 표시됩니다.

이제 다음으로 교체하십시오 this.$nextTick.setTimeout

setTimeout(() => {
    this.msg = 'Three';
}, 0);

브라우저를 다시로드하십시오. 당신이보기 Two전에 당신은 당신은 될 것 Three입니다.

라이브 를 보려면 이 바이올린을 확인하세요.

Vue가 DOM을으로 업데이트 Two하고 브라우저에 제어권을 부여 했습니다 . 브라우저가 표시 Two됩니다. 그런 다음 호출을 호출합니다. Vue는 DOM을 Three. 브라우저가 다시 표시됩니다.

와 nextTick. Vue는 DOM을 Two. 호출을 호출했습니다. Vue는 DOM을 Three. 그런 다음 브라우저를 제어했습니다. 그리고 브라우저에 Three.

분명한 것을 바랍니다.

Vue 가이를 구현하는 방법을 이해하는 이벤트 루프 및 마이크로 태스크 의 개념을 이해해야합니다 .

다음과 같은 개념이 명확하게 해지면 nextTick 의 소스 코드를 확인하십시오 .

---

Next Tick은 기본적으로 반응 속성 (데이터)을 일부 변경했을 때 vue가 구성 요소를 다시 한 번 코드를 사용할 수 있습니다.

// 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.
})

Vue.js 문서에서 :

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

여기에서 자세히 알아 보세요 .

---

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'
}

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

---

더 명시 nextTick과의 setTimeout을 사용 사이의 차이에 대한 Pranshat의 답변을하기 위해, 나는 그의 바이올린 포크했다 : 여기

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

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

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

setTimeOut을 사용할 때 변경 사항을 적용하기 전에 구성 요소가 마운트되면 초기 데이터가 매우 짧게 깜박임을 알 수 있습니다. 반면에 nextTick을 사용하면 브라우저에 렌더링하기 전에 데이터가 하이재킹되고 변경됩니다. 따라서 브라우저는 이전에 대한 지식 없이도 업데이트 된 데이터를 표시합니다. 두 가지 개념이 한 번에 해결되기를 바랍니다.

참조 URL : https://stackoverflow.com/questions/47634258/what-is-nexttick-or-what-does-it-do-in-vuejs