[vue] vue3

vue3을 사용하게 된 계기

vue2를 사용했었는데 새로운 프로젝트를 들어가며 vue3버전을 맞이하게 됐다.
vue3에는 생각보다 많은 기능이 추가되었고, 사용법이 많이 달라져서 정리해본다.

vue3의 기능

1) composition API

• composition API는 vue2에 있던 Mixin기능을 대체
• Mixin은 여러 컴포넌트에서 공통으로 함수를 사용하기 위해 만들어진 기능인데, composition API로 조금 더 쉽게 코드 재활용을 할 수 있음
• option API는 다르게 효과적인 그룹화가 가능
• 상태관리

  • ref : 값에 반응
  • reactive : 객체에 반응 (script 내부 사용 시, .value 사용)
  • computede : 즉시 반응 (script 내부 사용 시, .value 사용)

2) suspense

렌더링이 되기 전 화면으로 아직은 시도 중인 기능이라 많이 사용하지 않음

3) Teleport

DOM계층을 무시하고 렌더링한다. ex) 공통 모달이나 컴포넌트 만들 때 사용 (로딩중)

4) 다중 v-model 사용

기존 vue2에서는 v-model을 태그에 하나만 사용했다면, vue3에서는 여러개 사용 가능

5) Proxy

ref, reactive를 사용

const obj = reactive({})
obj.item1 = 2
//obj를 감시, obj에 item1이 추가된 것을 감지

6) Fragments

컴포넌트를 div태그에 넣지 않아도 바로 사용 가능함

7) Emits

컴포넌트에 emit을 사용하는지 명시해줌으로써 파악이 가능함

8) createRender

• 렌더링 동작을 정의
• Node와 Element를 제네릭 인자로 받아서 동작 변경

//insert함수 => element 삽입 시 호출
const {createApp} = createRender({
	insert : (child, parent, achor) => {
		//함수 내용
	}
})

9) setup 함수

• composition API는 setup 함수 안에서 사용이 가능
• 스크립트로 작성
• <script setup>은 component도 setup도 필요 없음
• ref 사용하면 value 속성도 필요 없음

10) watch와 watchEffect

• watch는 이전값, 현재값 모두 필요한 경우 사용
• watchEffect는 현재값만 필요할 때 사용
• watchEffect는 감시하는 대상을 명시적으로 지정하지 않음
• watchEffect는 watchEffect에 전달하는 콜백 메소드 안에 반응성을 가진 데이터를 사용하는 경우에만 호출

11) EventBus 사용 X -> provide/Inject

prop 드릴링
Props로 데이터를 하위컴포넌트에 전달할 때, 하위의 하위 Component에 전달해야하는 end 컴포넌트까지의 루트가 복잡해지면 props전달이 반복되는 비효율적인 데이터 전달을 하는 것을 의미

• 이를 해결하기 위해 vuex, pinia 등의 상태관리 라이브러리도 사용 가능
• 특정 범위내에서만 유효한 데이터 전송 루트가 필요할 경우 Provide(데이터 제공)/ Inject(데이터 주입)을 이용

Vuex와 pinia의 차이

vuex

• state. mutations, action 포함
• dispatch로 호출

pinia

• action method 직접 호출 가능 (getter는 선택적)
• action과 state만 정의 가능
• composition API 지원

pinia 사용법

state : () => {
	return  { count:0 }
},
actions : {
	increment() {
    	this.count++
    }
}

위의 코드와 동일

const count = ref(0)
function increment() {
	count.value++
}
return {count, increment}

동작 방법

1) counter.$patch({ count: counter.count+1})
2) counter.increment()