破壊的変更

このページでは、Vue 2 から Vue 3 の破壊的変更をすべてリストアップしています。

たくさん変わったように見えますが、Vue について皆さんが知っていることや気に入っていることの多くは変わりません。しかしできる限り徹底して、ドキュメント化されたすべての変更について詳細な説明と例を提供したいと考えました。

詳細

グローバル API

• グローバル Vue API はアプリケーションインスタンスを使用するように変更されました
• グローバル API と内部 API が再構築され、ツリーシェイキングが可能になりました

テンプレートディレクティブ

• コンポーネントでの v-model の使用方法が見直され、v-bind.sync を置き換えます
• <template v-for> や v-for でないノードでの key の使い方が変更されました
• v-if と v-for を同じ要素で使用した場合の優先順位が変更されました
• v-bind="object" は順序に依存するようになりました
• v-on:event.native 修飾子は削除されました

コンポーネント

• 関数型コンポーネントはプレーンな関数のみで作成できます
• 単一ファイルコンポーネント（SFC）における <template> の functional 属性と、コンポーネントオプションの functional は非推奨です
• 非同期コンポーネントを作成するには defineAsyncComponent メソッドが必要になりました
• コンポーネントイベントは emits オプションで宣言する必要があります

レンダー関数

• レンダー関数の API が変更されました
• $scopedSlots プロパティーは削除され、すべてのスロットが $slots で関数として公開されます
• $listeners は削除され、$attrs に合併されました
• $attrs には class と style 属性が含まれるようになりました

カスタム要素

• テンプレートのコンパイル時に、カスタム要素のチェックが行われるようになりました
• 特別な is 属性の使用は、予約済みである <component> タグのみに制限されます

その他の小さな変更

• ライフサイクルの destroyed オプションは unmounted に名称変更されました
• ライフサイクルの beforeDestroy オプションは beforeUnmount に名称変更されました
• props の default ファクトリー関数は this コンテキストにアクセスできなくなりました
• カスタムディレクティブ API は、コンポーネントのライフサイクルに合わせて変更され、binding.expression は削除されました
• data オプションは、常に関数として宣言する必要があります
• mixins の data オプションは浅くマージされるようになりました
• 属性の型強制戦略が変更されました
• 一部のトランジションクラス名が変更されました
• <TransitionGroup> はデフォルトでラッパー要素をレンダリングしないようになりました
• 配列を監視している場合、コールバックは配列が置換されたときにのみトリガーされます。変更時にトリガーする必要がある場合は、deep オプションを指定する必要があります。
• 特別なディレクティブ（v-if/else-if/else, v-for, v-slot）を持たない <template> タグはプレーンな要素として扱われ、その内部コンテンツをレンダリングする代わりに、ネイティブの <template> 要素が生成されるようになりました。
• マウントされたアプリケーションは、そこにマウントされている要素を置き換えません
• ライフサイクルの hook: イベントプレフィックスが vnode- に変更されました

削除された API

• v-on 修飾子としての keyCode サポート
• $on, $off, $once インスタンスメソッド
• フィルター
• インラインテンプレート属性
• $children インスタンスプロパティー
• propsData オプション
• $destroy インスタンスメソッド。ユーザーは、個々の Vue コンポーネントのライフサイクルを手動で管理する必要がなくなりました。
• グローバル関数の set と delete、インスタンスメソッドの $set と $delete は削除されました。プロキシベースの変更検出では不要になりました。