[Vue.js] $nextTick

[Vue.js] $nextTick

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

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

◽ $nextTick()

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

따라서 Vue.js에서는 데이터 갱신, UI 업데이트 등 DOM의 모든 변경사항이 완전히 반영된 후에 로직을 실행할 수 있도록 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

from http://be-a-weapon.tistory.com/195 by ccl(A) rewrite - 2021-12-19 16:27:44