-
[Vue] Vue2 VS Vue3 차이점SPA/Vue.js 2024. 4. 8. 12:40
Vue2의 공식 지원이 종료되면서 지금 진행하는 프로젝트도 Vue3로 마이그레이션을 진행 중이다.
이에 맞춰 Vue2에서 Vue3로 변경되며 어떤 점이 바뀌었는지, 차이점에 대해 명확히 알아보자.
1. Composition API
Vue3의 가장 큰 특징이자 차이점이라 할 수 있는 composition API이다.
기존에 script에서 사용하던 computed, watch 등이 API 메서드로 대체되어 setup() 메서드 내에 선언 및 반환하는 형태로 바뀌었다.
자세한 내용은 아래 블로그를 참고하자,
https://chaeng03.tistory.com/entry/Vue-Composition-API
[Vue] Composition API
Vue2와 Vue3의 차이점을 정리하던 중 제일 큰 차이점인 Composition API는 따로 정리해야 할 것 같아 글을 작성하게 되었다. 1. Composition API란? Composition API는 함수 기반의 API로, 컴포넌트 내에서 사용하
chaeng03.tistory.com
2. Fragments
Fragments는 다중 루트 노드 컴포넌트를 의미한다.
일반적으로 자식 목록을 반환하는 용도로 사용되는데, Vue2에서는 단일 루트 노드만을 지원했다.
즉, 아래와 같이 template 안에 불필요하게 div로 전체를 감싸는 태그가 필수적이었다.
<template> <div> <header></header> <main></main> <footer></footer> </div> </template>그러나 Vue3에서는 다중 루트 노드(Fragments)를 지원하므로 불필요한 tag 사용을 막을 수 있게 되었다.
<template> <header></header> <main></main> <footer></footer> </template>3. Emits 옵션
Vue2에서는 emit 사용 시 별도의 정의없이 아래와 같이 부모에서 자식으로 넘겨주면 자식에서 사용하는 방식으로 진행했다.
// 부모 컴포넌트 <ChildComponent @handleEmit=""openPopup" /> // 자식 컴포넌트 <button @click="$emit("handleEmit")/>그러나 Vue3에서는 props처럼 emit을 정의하는 부분이 별도로 존재한다.
<script setup> defineEmits(['inFocus', 'submit']) </script>또한 이벤트 유효성 검사를 할 수 있는데 props에서 type을 지정하던 방식을 생각하면 이해하기 쉽다.
아래 예시는 인자로 받아온 값의 type을 검사하는 방식의 유효성 검사를 진행하고 있다.
<script> export default { emits: { receiveNumber: (num) => { return typeof num === 'number' } }, methods: { canNotReceiveNumber() { this.$emit('receiveNumber', 'TEST') // 경고 표시 }, canReceiveNumber() { this.$emit('receiveNumber', 111) // OK } } } </script>4. Teleport
모달과 같이 부모에 상속되어 있으면서도 렌더링되는 위치는 다른 영역인 경우 사용할 수 있다.
<teleport to=".modal-area"> <Nodal v-show="isModal"/> </teleport>위 예시처럼 다른 위치로 렌더링할 엘리먼트를 teleport tag로 감싸고 to 속성에 렌더링할 위치의 id나 class명을 설정하면 된다.
<!-- index.html --> <body> <div id="app"></div> <div class="modal-area"></div> </body>5. 라이프 사이클
Vue3에서는 라이프 사이클의 명칭이 변경된다. (역할은 변경되지 않는다.)
- beforeDestroy => beforeUnmount
- destroy => Unmount
'SPA > Vue.js' 카테고리의 다른 글
[Vue] Filter로 데이터 필터링하기 (0) 2024.05.27 [Vue3] ref VS reactive (0) 2024.04.27 [Vue] Composition API (2) 2024.04.03 [Vue] v-deep 셀렉터 (0) 2024.01.09 Vue.js(9)_Todo (0) 2022.09.28