[Vue] nextTick

nextTick

📌 정의

비동기적으로 DOM 업데이트 후에 어떤 코드를 실행하고자 할 때 사용하는 메소드이다. Vue.js는 데이터 변경을 감지하고 화면을 업데이트하기 위해 비동기적인 프로세스를 사용하는데, 때로는 데이터 변경 후에 DOM이 업데이트되기를 기다려야 하는 상황이 발생한다. 이때 nextTick을 사용한다.

✍ 예시 코드

new Vue({
  data: {
    message: 'Hello!'
  },
  methods: {
    updateMessage: function () {
      this.message = 'Updated!'
      console.log('Message updated:', this.$el.textContent) // 이 시점에서 DOM이 아직 업데이트되지 않았을 수 있음
      this.$nextTick(function () {
        console.log('Next tick:', this.$el.textContent) // 다음 DOM 업데이트 사이클에서 실행됨
      })
    }
  }
})

Promise를 반환하기도 하며, 이를 이용하여 비동기 코드를 작성할 수도 있다.

this.$nextTick().then(function () {
  // DOM 업데이트가 완료된 후에 실행되는 비동기 코드
})

nextTick은 Dom 업데이트가 모두 끝난 뒤에 실행시키고싶은 함수가 있을 때 사용