안녕하세요
개발자 입장에서는 DOM을 직접 컨트롤 하지 않아도 되는 장점이 있습니다.
DOM을 직접 컨트롤 하는 jQuery를 사용하다 Vue로 넘어올 때 혼란스러워 하는 부분입니다.
Vue는 데이터를 변경하면 event loop로 인해 layout은 자동으로 변경됩니다.
버튼 클릭 시 카운터를 올리는 예제인데 script 부분이 많이 줄어든 부분이 보이실 겁니다.
예제 확인 : https://codepen.io/maruara/pen/KKavVPL
- jQuery
<button type="button" id="btnAdd">Add 1</button>
<p id="txt"></p>
<script>
jQuery(function($) {
let counter = -1;
$('#btnAdd').on('click', function(e) {
counter++;
$('#txt').text('위 버튼을 클릭한 횟수는 ' + counter + ' 번 입니다.');
}).trigger('click');
});
</script>- Vue
<div id="app">
<button v-on:click="counter += 1">Add 1</button>
<p>위 버튼을 클릭한 횟수는 {{ counter }} 번 입니다.</p>
</div>
const app = new Vue({
el: '#app',
data: {
counter: 0
}
});Vue2 부터는 Virtual DOM을 지원하므로 성능을 올릴 수 있는 선택지도 넓어집니다.
직접 경험해 보는 것 만큼 좋은 것은 없다고 생각됩니다.
Vue 사이트에 가시면 예제가 쉽게 잘 되어 있으니 한 번 해 보시면 장/단점이 느껴지실 겁니다.