Vue의 nextTick

nextTick?

Vue에서 비동기적으로 DOM 업데이트 이후 콜백을 실행하기 위해 실행되는 메서드

Vue의 데이터가 업데이트되면 DOM 업데이트도 자동으로 처리되지만, 데이터 업데이트 후 바로 DOM 업데이트가 되지 않을 수도 있는데 이런 경우 nextTick을 사용한다!
nextTick 콜백 함수는 DOM이 그려지고 난 이후 실행되는 함수이며 async, await과 같이 사용할 수 있다.

<template>
	<div ref="div">
    	나는 div
        <button @click="clickEvent">나는 button</button>
    </div>
</template>

<script>

created() {
	$this.nextTick(() => {
    	// this.refs.div에 대한 로직 작성
    })
}

methods: {
	// async, await을 사용한 nextTick
	async clickEvent() {
		await $this.nextTick();
        // this.refs.div에 대한 로직 작성
    }
}

</script>