📚 Reference

• 공식 문서 1
• 참고 자료 1

📜 Chapter

Troubleshooting

nextTick

• 데이터가 업데이트 되어 페이지가 렌더링 될 때, 또는 UI가 변경될 때, DOM에 접근하는 작업을 하면 Vue객체가 찾지 못하는 경우가 발생한다. → 에러 발생
• 이는 JavaScript가 비동기적으로 작동되는 원리 때문이다.
• nextTick이라는 함수는 이를 기다려주어 모든 데이터의 업데이트나 렌더링이 끝난 후 DOM에 접근하는 함수를 의미한다.

사용

function nextTick(callback?: () => void): Promise<void>

예제

• 예시 1

  <script setup>
  import { ref, nextTick } from 'vue'
  
  const count = ref(0)
  
  async function increment() {
    count.value++
  
    // DOM not yet updated
    console.log(document.getElementById('counter').textContent) // 0
  
    await nextTick()
    // DOM is now updated
    console.log(document.getElementById('counter').textContent) // 1
  }
  </script>
  
  <template>
    <button id="counter" @click="increment">{{ count }}</button>
  </template>