脳死でアップデートは危険！Vue3.0の破壊的変更点を要チェック！！

はじめに

Vue3.0がリリースされましたが、Vue2系からアップデートしましたか？
実は破壊的な変更点があり、思考停止でアップデートすると危険です。
今回は破壊的変更点の中で特に影響が大きそうな部分を抽出して解説します！！

動画でも解説してるので、動画が好きな方はそちらを確認してみてください！！
【YouTube動画】 Vue3.0の破壊的変更点

Global 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'

まとめ

いかがでしたか？
間違ってる部分やもっと解説して欲しい部分があれば、コメントいただけると嬉しいです！

また、twitterやyoutubeでのコメントもお待ちしています！