내가 느끼는 Vue2에서 Vue3로 마이그레이션 하면서 눈에 띄게 변화된 것

1. Options > Composition API

 

- Composable 함수 형태로 효율적인 로직 재사용이 가능해졌다.

- 그렇기 때문에 Vue2에서 사용하던 Mixin은 Vue3에서 권장하지 않는다.

- <script> 블록에 setup 속성을 추가하여 사용한다.

<script setup>
console.log('안녕, script setup!')
</script>

- Component가 생성되기 전에 setup이 먼저 생성 되어서 this를 통해 데이터에 접근할 수 없다.

 

그 외에 hook 네이밍 변경된 것과 반응형 데이터 정의하는 법 등이 달라졌는데.. Composition API 사용하면서 가장 달라졌다고 생각하는 것만 적어봤다. 디테일 하게 변화된 내용이 궁금하다면 아래 링크 참고.

 

https://ko.vuejs.org/guide/extras/composition-api-faq

Vue.js

 

 

 

2. Reactivity API (reactive, ref, toRefs, readonly)

반응형 데이터를 정의할 때 기존에는 data option에 정의해서 사용했다면, Vue3에서는 데이터의 형태에 따라 구분하여 반응형 데이터를 생성한다.

 

특징	ref	reactive
타입	기본 데이터 타입과 단일 값에 적합	객체 및 배열에 적합
접근 방식	.value로 접근	직접 속성으로 접근
복합성	다차원 객체 사용시 ref안에 감싸야 함	객체의 모든 속성이 자동으로 반응형
유연성	비즈니스 로직에서 사용할 때 편리	데이터 구조가 복잡한 경우 유리

 

const result = ref(false);

const list = reactive([])

 

Vue2에서는 Object.defineProperty로 데이터 속성을 감지해서 배열 같은 경우 push, slice, shift와 같은 함수를 통해서만 변화 감지를 알 수 있었다. 반면에 Vue3에서는 Javascript의 Proxy 객체를 통해 데이터 속성을 감시하기 때문에 배열의 특정 변화도 감지할 수 있게 되었다. 특히 전 회사에서 프로젝트할 때 Object 속성 변화를 감지하지 못해서 리렌더링이 되지 않아 Vue.set() 함수를 사용해 데이터 변경 감지 요청을 했던 기억이 있다. 굉장히 번거로웠던 기억이 있어서 해당 부분이 개선된게 개발할 때 가장 크게 와닿는 변화일 것 같다. toRefs와 readonly는 공식문서 참고..

 

const data = {
  message: "Hello",
};

// Vue 2에서 새로운 속성을 추가하는 경우
Vue.set(data, 'newProp', 'Hi'); // 이렇게 해야 newProp이 반응형으로 설정됨

const data = reactive({
  nested: {
    count: 0,
  },
});

// Vue 3에서는 중첩 속성을 자동으로 감지
data.nested.newCount = 1; // newCount가 자동으로 반응형으로 설정됨

 

 

 

3. 제공(Provide)과 투입(Inject)

기존에는 최상위 부모에서 최하위 자식에게 데이터를 전달한다고 했을 때 props 속성을 이용해서 데이터를 타고 타고 전달해 주어야 했다. 밑에 그림을 예시로 들면, Footer 컴포넌트에 Root 컴포넌트가 전달한 props의 데이터가 필요 없을 때에도 DeepChild 컴포넌트에 데이터를 전달해 주기 위해서 props를 통해 데이터를 받아야 했다.

 

이런 번거로운 문제점 때문에 Vuex를 쓰는 경우도 많았는데 이 부분이 개선되었다고 한다. 

import { provide } from 'vue'

export default {
  setup() {
    provide(/* 키 */ 'message', /* 값 */ '안녕!')
  }
}

<script setup>
import { inject } from 'vue'

const message = inject('message')
</script>

 

Root 컴포넌트에서 provide 함수로 데이터를 전달하면 해당 데이터가 필요한 자식 컴포넌트에서 inject로 전달받을 수 있다. Vue2에 비해 효율적이고 간편하게 부모와 자식 간에 데이터를 주고받을 수 있다는 점에서 크게 개선된 것 같지만 코드가 커지면 어떤 부모에서 해당 데이터를 내려주는 건지 추적하기가 힘들 것 같다는 생각이 들었다.

 

 

 

 

4. Fragments

vue2에서는 지원하지 않았던 다중 노드를 지원한다.

 

Vue 2.x

<template>
  <div>
    <p>Root 한 개</p>
  </div>
</template>

Vue 3.x

<template>
  <div>
    <p>Vue3는 </p>
  </div>
  <div v-bind="$attrs">
    <p>multiple roots</p>
  </div>
</template>