Vue.js와 jQuery 공존하기 :: 마이구미

이번 글은 Vue.js와 jQuery를 같이 사용할 때 숙지해야할 것들을 다뤄본다.

Vue.js를 쓰기 전에  Virtual DOM은 반드시 숙지해야한다. (Virtual DOM 관련 글)

글을 이해하기 위해서도 필요하다.

jQuery는 DOM 조작에 있어서, 정말 편리하고 이용해왔고, 계속해서 쓰고 있다.

그렇기에 Vue를 쓰면서 jQuery를 통해 DOM 조작을 할 수도 있다.

이러한 경우, 단순히 Vue와 jQuery를 같이 사용하면 안된다.

고려해야할 것들이 존재한다.

이유는 Virtual DOM이다.

Vue는 Virtual DOM에 접근하고, jQuery는 실제 DOM에 접근한다.

이것이 뜻하는 의미는 아래와 같다.

만약 jQuery를 통해 DOM을 추가할 때, Vue는 실제로 추가되는 DOM을 무시한다.

=> jQuery는 바로 실제 DOM 접근하기에, 추가된 DOM은 Virtual DOM이 존재하지 않는다.

만약 Vue에서 관리하는 DOM을 변경할 경우, 업데이트 될 때마다 재정의가 된다.

만약 실제 DOM을 제거한 후, 더이상 없는 요소를 업데이트하려고 할 경우에 에러가 발생할 수 있다.

직관적으로 표현하자면, 서로 다른 DOM을 접근하기 때문에 서로 동기화가 맞지 않는 결과를 초래할 수 있다.

DOM 관리에 있어 Vue만을 사용한다면 동기화를 보장할 수 있다.

어쩔 수 없는 경우가 있을 수 있으니, 확실히 숙지를 해야한다.

에러가 발생하는 일은 흔치 않지만, DOM 조작은 Vue를 통해 하는 것이 여러모로 좋다.

X - jQuery
$('#test').css({color: red})

O - Vue
<template lang="html">
  <div 
    id="test"
    :style="styleObject">
      야호
  </div>
</template>

<script>
  export default {
    data () {
      return {
        styleObject: {
          color: 'red'
        }
      }
      ............
    }
  }
</script>

참고 자료

https://forum.vuejs.org/t/how-vue-2-0-work-with-jquery/3591/3