[Vue.js] $nextTick

 

항상 보이던 $nextTick()... 대충 promise 같은 개념이라고만 생각하고 있었다.

미루고 미루다가 이제서야 정리해봄... ^^

 

 

---

 

◽ 개요

Vue.js에서 mounted()는 DOM의 모든 변경사항을 반영하고나서 실행되는 훅이다. Javascript는 비동기로 처기되기때문에 DOM의 모든 변경사항이 반영 되기 전에 DOM에 접근하려고하면 undefined나 null 에러가 발생한다.

따라서 Vue.js에서는 데이터 갱신, UI 업데이트 등DOM의 모든 변경사항이 완전히 반영된 후에 로직을 실행할 수 있도록 nextTick()을 제공한다.

 

 

◽ $nextTick()

Vue.nextTick( [callback, context] )

 

 

◽ $nextTick() 사용해보기

// 실행할 함수를 $nextTick()으로 감싸준다.
mounted() {
	this.$nextTick(function() {
		...함수실행
	})
    
	// ES6
	this.$nextTick(() => {
		...함수실행
	})
}

 

 

 

출처 및 참조

Vue.js에서 nextTick 사용하기

https://pinokio0702.tistory.com/249

https://kr.vuejs.org/v2/api/#Vue-nextTick