[Vue.js] NextTick

개발 환경

---------------------------------

OS : Mac

개발 툴 : intelliJ

개발 언어 : java

프레임워크 : nuxt.js

---------------------------------

 

DOM(웹 페이지)에서 데이터가 업데이트 되어 페이지가 렌더링되거나 UI가 변경될 때 

즉, DOM에 접근하는 작업을 하는 경우 Vue가 다시 DOM을 바로 인식하지 못하는 경우가 있습니다.

이런 경우 자바스크립트의 비동기 특성으로 오류가 발생합니다.

 

nextTick 메서드는 DOM을 다시 인식하기까지 기다려줍니다.

모든 데이터의 업데이트 및 화면 렌더링을  마친 후 DOM에 다시 접근합니다.

 

아래는 nextTick 사용 예시입니다.

const nextTickTest = async () => {
  const result = await $fetch('api/test', {
    baseURL: 'https://domain/test',
    method: 'POST',
  })

  identity.value = result.data;

  nextTick(() => {
    console.log(identity.value)
  })
}