써보시면 압니다.
일단 코드양이 현저하게 줄어듭니다.
코드양이 줄어든다는 것은 가독성이 올라가고, 유지/보수가 쉬워진다는 의미로도 볼 수 있겠습니다.
가장 큰 장점은 반응형 시스템을 사용할 수 있다는 것인데,
이것이 바로 Vue가 jQuery 가장 다른 부분이라고 할 수 있겠습니다.
Vue 객체 (Javascript 객체) 가 DOM 에 연결됩니다.
단순히 DOM 의 내용을 사용자가 수정했을 뿐인데, 연결된 Javascript 객체의 상태가 변경됩니다.
상태가 변경되면 다시 렌더링이 이루어지기 때문에 변경된 객체의 상태가 바로 화면에 반영됩니다.
가령 예를들어, 사용자가 입력하는 것을 div tag 안에 뿌려주는 간단한 코드를 보면,
<div id="content"></div>
<input type="text" id="text" placeholder="무엇이든 입력하세요.">
<script>
(function() {
$('#text').keyup(function() {
$('#content').html($(this).val());
});
})();
</script>jQuery는 이런식으로 코딩할 수 있을 텐데요, 우선 코드 가독성이 아주 나쁩니다. DOM selector로 #text를 집어와서 keyup event를 붙이고, 이벤트가 발생할 때마다 #text의 값으로 #content의 내용을 바꾸는 형태라고 볼 수 있습니다.
아래는 Vue로 짰을 때입니다.
<div id="app">
<div v-html="content"></div>
<input type="text" placeholder="무엇이든 입력하세요." v-model="content">
</div>
<script>
new Vue({
el: '#app',
data: {
content: ''
}
});
</script>script 안쪽을 보시면 Vue 객체 선언하고 속성 두가지 설정해준 것 밖에 없습니다. 반응형 시스템이라서 사용자가 input tag에 값을 입력하면 Vue 객체의 data.content 값이 자동으로 바뀌고 바뀐 값이 그대로 div 안에 출력되는 것입니다.
jQuery도 DOM을 다루는 데에는 막강하지만 저는 Vue로 넘어오고 오랫동안 아픈데가 낫는 느낌이었습니다. 즐코딩하세요!