vue nextTick()

아래와 같은 코드가 있다고 가정해보자. v-if가 처음 false라서 보이지 않을 것이다.

그리고 mount된 후 load의 값을 true로 변경하여 그 보여질 것이다. 

그리고 ref값이 target인 DOM에 접근하려고 했으나 과연 값은 어떨까? 

처음에 생각했을 때 당연히 dom이 출력될 것이라고 생각하였지만 실제로는 undefined가 출력이 되었다.

이 이유는 Vue가 DOM업데이트를 비동기로 하기 때문이라고 한다.

 

따라서 저 값을 제대로 얻으려면 어떻게 해야할까?

이때 사용하는 것이 바로 nextTick이다. Vue가 데이터를 변경한 뒤 DOM업데이트를 마칠 때 까지 기다리려면 데이터가 변경된 직후에 nextTicㅏ을 사용하면 된다. 이건 DOM이 업데이트 된 후에 호출이 된다.

 

콜백함수의 형태를 띄고 있으며 

async await으로 해결이 가능하다.