# 시작하기
INFO
Vue.js의 새로운 기능에 대한 정보가 필요하신가요? 그렇다면 필수가이드를 확인하세요.
이번 가이드는 Vue 2 경험이 있으면서, Vue 3 변경사항 및 새로운 기능을 배우고 싶은 사용자를 주요 독자로 삼았습니다.** 이 문서는 Vue 3를 시도하기 전 꼭 읽어야 하는 것은 아닙니다. ** 변한 것이 많아 보이지만, Vue에 관해서 알고 좋아하던 것들은 여전히 같습니다.; 그렇지만 우리는 문서화 된 변경 점에 대한 예제들과 자세한 설명을 가능한 철저하게 제공하고 싶었습니다.
# 개요
Vue Mastery (opens new window)에서 Vue 3를 배워보세요.
# 시작하기
CDN을 통해 시작:
Codepen (opens new window)의 인브라우저 플레이그라운드에서 시작
CodeSandbox (opens new window)의 인브라우저 샌드박스에서 시작
Vite (opens new window)를 사용해 시작:
npm init vite-app hello-vue3 # 또는 yarn create vite-app hello-vue3
1vue-cli (opens new window)를 사용해 시작:
npm install -g @vue/cli # 또는 yarn global add @vue/cli vue create hello-vue3 # select vue 3 preset
1
2
3
# 주목할 만한 새로운 기능들
Vue 3에서 주목할 만한 새로운 기능 중 일부는 다음과 같습니다.
- Composition API
- Teleport
- Fragments
- Emits 컴포넌트 옵션
- 커스텀 렌더들(custom renderers)을 생성하기 위한
@vue/runtime-core
의createRenderer
API (opens new window) - SFC Composition API의 더 쉬운 표현 (
<script setup>
) (opens new window) experimental - SFC State-driven CSS 변수 (
<style vars>
) (opens new window) experimental - SFC의
<style scoped>
는 전역 규칙으로 사용하거나 특정 slot의 규칙으로 사용가능합니다. (opens new window)
# 주의해야 할 변경사항들
INFO
우리는 Vue 2 호환 동작과 호환되지 않는 사용에 대한 런타임 경고가있는 Vue 3용 마이그레이션 빌드 작업 중입니다. 중요한 Vue 2 앱을 마이그레이션 할 계획이라면, 원활한 환경을 위해 마이그레이션 빌드를 기다리는 것이 좋습니다.
다음은 2.x의 사용자가 주의해야 할 변경사항들로 구성됩니다.
# 전역 API
# 템플릿 디렉티브
v-model
컴포넌트의 사용법이 재정의되었습니다.<template v-for>
와v-for
가 아닌 노드들의key
사용 방법이 변경되었습니다.- 같은 요소에
v-if
와v-for
사용될 때 우선순위가 변경 되었습니다. - 이제부터
v-bind="object"
는 순서에 민감합니다. v-for
내부의ref
는 더이상 refs 참조 배열을 자동생성하지 않습니다.
# 컴포넌트들
- 함수형 컴포넌트는 오직 일반 함수를 사용해서만 만들 수 있습니다.
- 싱글 파일 컴포넌트(SFC)
<template>
및함수형
컴포넌트 옵션의functional
속성은 더 이상 사용되지 않습니다. - 비동기 컴포넌트는 이제 생성을 위해
defineAsyncComponent
메서드가 필요합니다.
# 렌더 함수
# 커스텀 요소들
# 기타 소소한 변경사항들
destroyed
라이프사이클 옵션의 명칭이unmounted
로 변경되었습니다.beforeDestroy
생명주기 옵션의 명칭이beforeUnmount
로 변경되었습니다.- Props
default
팩토리 함수는 더이상this
에 접근할 수 없습니다. - 컴포넌트 라이프사이클에 맞게 사용자 지정 디렉티브 API가 변경 되었습니다.
data
옵션은 항상 함수로 선언되어야 합니다.- 이제 mixins의
data
옵션은 얕게 병합됩니다. - 속성 강제 방법이 변경되었습니다.
- 몇몇 Transition 클래스의 명칭이 변경되었습니다.
- 배열에서 watch 콜백은 배열이 교체될 때만 발생합니다.
배열의 변경 사항에 대해 watch 콜백을 실행하려면, 반드시deep
옵션을 설정해야 합니다. - 특수 디렉티브(
v-if / else-if / else
,v-for
또는v-slot
)이 없는<template>
태그는 이제 일반 요소로 처리되며 내부 콘텐츠를 렌더링하는 대신 native<template>
요소가 됩니다 - Vue 2.x에서 애플리케이션 루트 컨테이너의
outerHTML
은 루트 컴포넌트 템플릿으로 대체됩니다. (또는 루트 컴포넌트에 템플릿/렌더링 옵션이 없는 경우 최종적으로 템플릿에 컴파일됩니다.) Vue 3.x는 이제 애플리케이션 컨테이너의innerHTML
을 대신 사용합니다. 이는 컨테이너 자체가 더이상 템플릿의 일부로서 고려되지 않음을 의미합니다.
# 제거된 APIs
v-on
수정자로서의키코드(keyCode)
지원- $on, $off 그리고 $once 인스턴스 메소드
- 필터
- 인라인 템플릿 속성
$destroy
인스턴스 메서드. 사용자는 더 이상 개별 Vue 구성 요소의 수명주기를 수동으로 관리 할 필요가 없습니다.
# 지원 라이브러리들
이제부터 우리의 모든 공식 라이브러리들과 도구들은 Vue 3를 지원합니다. 하지만 여전히 대부분은 베타 상태이며 npm에서 next
dist 태그로 배포 됩니다. 2020년 말까지 latest
dist 태그를 사용하도록 모든 프로젝트를 안정화하고 전환 할 계획입니다.
# Vue CLI
v4.5.0부터 vue-cli
는 새 프로젝트를 만들 때 Vue3를 사전 설정하는 기본 옵션을 제공합니다. 이제 vue-cli
를 업그레이드하고 vue create
를 실행하여 Vue 3프로젝트를 만들 수 있습니다.
# Vue Router
Vue Router 4.0은 Vue 3를 지원하며, 자체적으로 많은 주의해야 할 변경사항들이 있습니다. 자세한 전문은 README (opens new window)를 확인하세요.
# Vuex
Vuex 4.0는 3.x와 거의 동일한 API로 Vue3 지원합니다. 유일하게 주의해야 할 변경사항은 플러그인 설치 방법 (opens new window)입니다.
# 확장 Devtools
우리는 여러 버전의 Vue를 지원하기 위해 새로운 UI와 리팩토링된 새로운 버전의 Devtools를 개발 중입니다. 새 버전은 현재 베타 버전이며 현재는 Vue 3만 지원합니다. Vuex와 Router의 통합도 진행 중입니다.
Chrome: Chrome web store에서 설치 (opens new window)
- Note: 베타 채널이 정식 버전의 devtools과 충돌 할 수 있으므로 베타 채널이 제대로 작동하려면 정식 버전을 일시적으로 비활성화해야 할 수 있습니다.
Firefox: 서명된 부가기능 다운로드 (opens new window) (Assets의
.xpi
파일)
# IDE 지원
VSCode (opens new window)와 함께 Vue 3의 IDE 지원을 도와주는 공식 확장 프로그램인 Vetur (opens new window)를 사용하는 것을 추천합니다.
# 다른 프로젝트들
프로젝트 | npm | Repo |
---|---|---|
@vue/babel-plugin-jsx | [] | [[GitHub]] |
eslint-plugin-vue | []![beta] | [[GitHub]] |
@vue/test-utils | []![beta] | [[GitHub]] |
vue-class-component | []![beta] | [[GitHub]] |
vue-loader | []![beta] | [[GitHub]] |
rollup-plugin-vue | []![beta] | [[GitHub]] |
[]: https://www.npmjs.com/package/@vue/babel-plugin-jsx [GitHub]: https://github.com/vuejs/jsx-next [beta]: https://img.shields.io/npm/v/@vue/devtools/beta.svg []: https://www.npmjs.com/package/@vue/devtools/v/beta [GitHub]: https://github.com/vuejs/vue-devtools/tree/next [beta]: https://img.shields.io/npm/v/eslint-plugin-vue.svg []: https://www.npmjs.com/package/eslint-plugin-vue [GitHub]: https://github.com/vuejs/eslint-plugin-vue [beta]: https://img.shields.io/npm/v/@vue/test-utils/next.svg []: https://www.npmjs.com/package/@vue/test-utils/v/next [GitHub]: https://github.com/vuejs/vue-test-utils-next [beta]: https://img.shields.io/npm/v/@ant-design-vue/babel-plugin-jsx.svg []: https://www.npmjs.com/package/@ant-design-vue/babel-plugin-jsx [GitHub]: https://github.com/vueComponent/jsx [beta]: https://img.shields.io/npm/v/vue-class-component/next.svg []: https://www.npmjs.com/package/vue-class-component/v/next [GitHub]: https://github.com/vuejs/vue-class-component/tree/next