Vue nextTick에 대하여
평소에 잘 몰랐고 사용할 일이 없어 잊혀졌던 nextTick에 대하여 알아보겠습니다.
nextTick
데이터가 업데이트 되어 페이지가 렌더링 될 때, 또는 UI가 변경될 때, DOM에 접근하는 작업을 하면 Vue객체가 찾지 못하는 경우가 발생합니다.
당연히 에러가 뜨고요.
이는 자바스크립트가 비동기적으로 작동되는 원리 때문입니다.
nextTick이라는 함수는 이를 기다려주어 모든 데이터의 업데이트나 렌더링이 끝난 후 DOM에 접근하는 함수를 의미합니다.
에러 예시
<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번이 진행되고 2번이 순차적으로 다 진행된 후 4번과 5번이 진행되면 너무 좋겠지만, 문제는 1번이 다 진행되기도 전에 즉 UI가 다 변경되기도 전에 DOM에 접근하려는 시도가 있었기 때문에 에러가 뜨게 됩니다.
그렇다면 nextTick를 사용하여 고친 코드는 어떨까요
nextTick을 사용한 예시)
<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
}
this.$nextTick(function() {
var dom = document.getElementById('item-0'); // 4
dom.style.backgroundColor = 'red'; // 5
});
}
},
methods: {
bindId: function(item) {
return 'item-' + item; // 3
}
}
})
</script>
이런식으로 nextTick()
을 선언한 후 DOM에 접근하는 작업을 내부의 콜백함수로 넣어주면 UI가 변경되거나 데이터가 업데이트 된 후 순차적으로 작업이 진행되어 원하는 결과를 얻을 수 있습니다.
참조 : https://doozi316.github.io/vuejs/2020/08/10/Vue4/
Author And Source
이 문제에 관하여(Vue nextTick에 대하여), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@bung1438/Vue-nextTick에-대하여저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)