このページでは、Vue 2 から Vue 3 の破壊的変更をすべてリストアップしています。
たくさん変わったように見えますが、Vue について皆さんが知っていることや気に入っていることの多くは変わりません。しかしできる限り徹底して、ドキュメント化されたすべての変更について詳細な説明と例を提供したいと考えました。
- コンポーネントでの
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属性が含まれるようになりました
- ライフサイクルの
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-に変更されました
v-on修飾子としてのkeyCodeサポート- $on, $off, $once インスタンスメソッド
- フィルター
- インラインテンプレート属性
$childrenインスタンスプロパティーpropsDataオプション$destroyインスタンスメソッド。ユーザーは、個々の Vue コンポーネントのライフサイクルを手動で管理する必要がなくなりました。- グローバル関数の
setとdelete、インスタンスメソッドの$setと$deleteは削除されました。プロキシベースの変更検出では不要になりました。