소개

Vue3.0이 출시되었지만 Vue2 시스템에서 업데이트 했습니까?
실은 파괴적인 변경점이 있어, 사고 정지로 업데이트하면 위험합니다.
이번은 파괴적 변경점 중에서 특히 영향이 큰 것 같은 부분을 추출해 해설합니다! !

동영상에서도 해설하고 있으므로, 동영상을 좋아하는 분은 그쪽을 확인해 보세요! !
【YouTube 동영상】 Vue3.0의 파괴적 변경점

글로벌 API

실제 코드 변경을 살펴 보겠습니다!
이전에는 다음과 같이 사용했던 부분이

import Vue from 'vue'
import App from './App.vue'

Vue.use(/* ... */)
Vue.mixin(/* ... */)
Vue.component(/* ... */)
Vue.directive(/* ... */)

new Vue({
  render: h => h(App)
}).$mount('#app')

이렇게 됩니다!

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.use(/* ... */)
app.mixin(/* ... */)
app.component(/* ... */)
app.directive(/* ... */)

app.mount(App, '#app')

createApp에서 인스턴스를 만든 후 Vue 설정을 추가합니다.
Vue.xxxx라고 쓰고 있던 부분은 수정하지 않으면 안됩니다.

Global API Tree Shaking

Tree Shaking은 사용되지 않는 코드를 제거하는 메커니즘입니다.
webpack에서 지원됩니다.

이전 버젼에서는 사용하지 않는 메소드도 번들 되고 있었습니다만, 새로운 버젼에서는 명시적으로 쓰지 않으면 번들 되지 않게 되었습니다.
이 덕분에 파일 크기가 작아집니다!

영향을 받는 것은 이하의 API이므로, 사용하고 있는 분은 수정이 필요합니다.

Vue.nextTick
Vue.observable
Vue.version
Vue.compile
Vue.set
Vue.delete

수정할 때 import에서 사용할 API를 지정합니다.

// Before
import Vue from 'vue'

Vue.nextTick(() => {
  // something DOM-related
})

// After
import { nextTick } from 'vue'

nextTick(() => {
  // something DOM-related
})

v-model

v-model을 작성하는 방법도 변경되었습니다.
예를 들어, 다음과 같이 작성한 경우

<Comp :value='pageTitle' @input='pageTitle=$event'/>

이렇게 변경해야합니다.

<Comp :modelValue='pageTitle' @update:modelValue='pageTitle=$event'/>

Functional Component

Functional Component를 사용하고 있던 분은 쓰는 방법이 간단하게 되었습니다.
다음과 같이 h를 가져오고 사용합니다.

import { h } from 'vue'

요약

어땠어?
틀린 부분이나 더 해설해 주었으면 하는 부분이 있으면, 코멘트 받을 수 있으면 기쁩니다!

또, 트위터 이나 youtube 에서의 코멘트도 기다리고 있습니다!