Vue3 Breaking Changes

Vue3移行におけるBreaking Changes

Vue3の公式ドキュメントにある通り、Vue3移行の専用ビルドも作成中らしく、移行ビルドを待つことが強く推奨されている。

本内容について、2020/11/18(水)の19:30~ オンラインで開催するフロントスペシャリスト達が語る最新Vue/React動向 iCARE Dev Meetup #15に登壇させていただきます。

本記事では、登壇する内容の全文をzennにて公開します。
Comming soon...の部分は、追って公開していきますのでお楽しみに🚀

Twitterもやってます。

Global API

Vue2の書き方

Vue2において、mixinsやpluginsなどでグローバルコンポーネントや、カスタムディレクティブを定義する場合、基本的にはVueインスタンスを使用していました。

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

Vue.config()
Vue.config.productionTip()
Vue.config.productionTip()
Vue.component()
Vue.directive()
Vue.mixin()
Vue.use()

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

Vue3の書き方

createAppというグローバルなappインスタンスを返すAPIに変更されました。

  import { createApp } from 'vue'
  const app = createApp({})

  app.config()
  app.config.productionTip()
  app.config.productionTip()
  app.component()
  app.directive()
  app.mixin()
  app.use()

  app.mount(App, '#app')

mountはシンプルになりました。

以下がVue2からVue3への移行表です。

Vue2(new Vue)	Vue3
Vue.config	app.config
Vue.config.productionTip	削除
Vue.config.ignoredElements	app.config.isCustomElement
Vue.component	app.component
View.directive	app.directive
Vue.mixin	app.mixin
Vue.use	app.use

参考
https://v3.vuejs.org/guide/migration/global-api.html#a-new-global-api-createapp

また、以下のVue.nextTick()のようなグローバルAPIは、

import { nextTick } from 'vue'

nextTick(() => {})

のような形でimportしてから使用するようになりました。

これはバンドルサイズ削減が目的で、名前付きimportのおかげで必要な分だけ、module単位で使用でき、バンドルサイズが削減できます。

Vue2(new Vue)
Vue.nextTick
Vue.observable
Vue.compile
Vue.nextTick
Vue.set
Vue.delete

Template Directive

Directive編 ~v-model,v-for~

Components

Comming soon...🚀

Render Function

Comming soon...🚀

Custom Elements

Comming soon...🚀

Other Minor Changes

Comming soon...🚀

Removed APIs

Comming soon...🚀