vue3 스터디 #1

2021/12/03 스터디 1일차

vue3 달라진점

• 코드베이스를 TypeScript로 전환 및 재개발
• Vue 인스턴스 생성 방법 변경
• Reactivity 동작 로직 변경
• Composition API 지원
• 라이프사이클 훅 이름 변경
• 기타 등등

Composition API

• vue3에서는 기본으로 빌트인 되어 추가 설치 없이 사용가능
  vue2에서는 플러그인 설치 필요
• Composition API 링크 (https://v3.vuejs.org/guide/composition-api-introduction.html)

Composition API 문법

1.setup()

• setup(props, context) { ... }의 형태로 사용, 컴포넌트 생성되기전 필요한것들을 세팅
• beforeCreate -> setup() 사용
  created -> setup() 사용
  beforeMount -> onBeforeMount
  mounted -> onMounted
  beforeUpdate -> onBeforeUpdate
  updated -> onUpdated
  beforeUnmount -> onBeforeUnmount
  unmounted -> onUnmounted

2. reactive, ref, toRefs

• 보여지는 변수는 ref/reactive로 선언, 내부로 사용할 변수는 X
• ref 배열까지 변의 감지 .value를 통한다. 배열로 선언된 ref는 .value를 벗겨줌
• reactive 오브젝트 변이 감지.
• toRefs 프로퍼티 변이도 감지. 오브젝트를 찢어서 사용

3. watch,computed

• watch 선언된 변수를 감지. 변이를 보겠다X, 감시하겠다O. 배열 추가, 빠지는건 감시X, 배열 하나하나는 감시 가능, 배열 전체는 감시X
• computed 배열 추가/삭제 시 .lenth로 감시. set형태X