[vue] nextTick에 대하여

nextTick이라는 함수는 모든 데이터의 업데이트나 렌더링이 끝난 후 DOM에 접근하는 함수를 뜻한다.

데이터가 업데이트 되어 페이지가 렌더링 될 때나 UI가 변경될 때, DOM에 접근하는 작업을 하면 Vue객체가 찾지 못하는 경우가 발생한다. 그러면 당연히 에러가 뜸!

이는 자바스크립트가 비동기적으로 작동되는 원리 때문이다.

nextTick으로 감싼 뒤 callback을 통해 DOM을 조작하게 되면 vue 에서 데이터 갱신 후 UI까지 완료한 뒤에 nextTick에 있는 함수를 최종적으로 수행함

methods: {
    async doSomething() {
        await this.$nextTick();
        // UI 완료 후 실행될 함수 ...
    }
}

nextTick()을 선언한 후 DOM에 접근하는 작업을 내부의 콜백함수로 넣어주면 순차적으로 작업이 진행되어 원하는 결과를 얻을 수 있다.