Vue3에 추가된 기능

• Composition API
• Teleport
• Fragments
• Emits 컴포넌트 옵션
• Custom Renderers을 생성하기 위한 @vue/runtime-core의 createRenderer API

Composition API

• setup() 함수를 선언하고 이 안에 필요한 로직을 작성한다.

<aside> 💡 **setup 함수란?

-** 컴포넌트가 생성되기 전에 props가 반환(resolved)되면 실행되는 컴포넌트 옵션으로 Composition API의 진입점 역할을 한다.

• 컴포넌트가 인스턴스가 생성되기 전이므로 다음과 같은 속성에만 접근이 가능하다. → props, attrs, slots, emit
• 즉, 다음 컴포넌트 옵션에는 접근할 수 없다. → data, computed, methods
• setup() 내부의 this는 현재 활성화된 인스턴스에 대한 참조가 아니다. 다른 컴포넌트 옵션들이 resolved 되기 전에 setup()이 호출되었기 때문이다.

</aside>

• setup() 함수 마지막에서 객체를 return 한다. → 이 객체들을 template에서 사용가능!
  • 이 객체에는 변수 뿐만 아니라, 함수도 포함된다.
  • 변수 : {{ name }}
  • 함수 : {{ greeting() }}
• setup() 함수 내에서 정의된 함수를 이용할 수 도 있다.

Fragment

• 기존의 Vue2에서는 template 내에서 무조건 Root Tag가 1개만 존재해야 했었다.
• 하지만 Vue3에서는 Root Tag가 1개 이상 나열하는 것이 가능하다.

ref vs reactive

▶ ➕ Vue 3의 ref vs reactive 좀 더 알아보기❗