[Vue] $nextTick() 사용방법

 

 

 

 

 

1. $nextTick() 이란?

- Javascript는 비동기로 처리되는 특성을 갖고있다.

- 떄문에 Data가 업데이트 되고 난 직후 UI가 갱신될 때 Vue가 DOM을 찾지 못하는 경우가 발생할수있다.

- 이와같은 문제점을 해결해주는 것이 callback 함수 $nextTick이다.

 

ex) 오류 예시

<div id="app">
    <div v-for="item in list">
        <div v-bind:id="bindId(item)"></div>    <!-- 2 -->
    </div>
</div>

<script>
new Vue({
    el: '#app',
    data: function() {
        return {
            list: []
        };
    },
    created: function() {
        var self = this;
 
        for(var i=0; i<100; i++) {
            this._data.list.push(i);    // 1
        }
 
        var dom = document.getElementById('item-0');    // 4
        dom.style.backgroundColor = 'red';                // 5
    },
    methods: {
        bindId: function(item) {
            return 'item-' + item;    // 3
        }
    }
})
</script>

(1) list에 데이터를 넣는 과정

(2) v-bind:id를 통해 bindId(item) 메소드 호출, 이때 item은 list의 요소이다.

(3) 호출된 bindId() 메소드 실행

(4) id가 “item-0”인 요소를 찾음

(5) backgroundColor을 red로 지정

→ (1) 수행 후 (2)가 수행된다면 오류가 없지만 (1)의 완료 전 DOM(2)이 로드되어 문제발생

 

 

 

2. $nextTick() 사용법

created: function() { 
    // ... 
    this.$nextTick(function() { 
        var dom = document.getElementById('item-0'); 
        dom.style.backgroundColor = 'red'; 
        }); 
}

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

 $nextTick을 사용한 콜백을 통해 DOM을 조작하게 되면 Data 갱신 후 UI 까지 완료한 뒤에 $nextTick에 있는 함수를 최종적으로 수행한다. 또한 awiat/async을 활용할 수도 있다.

 

 

 

 

 

# 참고사이트
https://kr.vuejs.org/v2/api/#Vue-nextTick