Vue2 から Vue3 にアップグレードする際に知っておくべきこと

隠れた危険

Vue3 がデータ応答性を実装する方法は、ProxyIE11 より前のバージョンに存在することです。兼容性问题
フレームワークの一番下でリファクタリングが多く行われ、多くの API が追加および削除されています. これらの場所は、プログラムの動作を保証するために変更する必要があります.
vue 関連のプラグインやサードパーティのプラグインなど、依存関係もアップグレードする必要があります。

アップグレード手順

合格工具+手动

第一歩：

まずはVue2のフレームワークをまるごとVue3にバージョンアップし、Vue3も互換性があるのでOption Api、コード構造を一時的に調整してから公式推奨のものに変更します。Composition Api

ステップ2：

Vue 関連の依存関係をアップグレードし、Vue/Vuex/Vue-router/Vue 编译工具

ステップ 3:

Vue3 でサポートされなくなった API と構文を変更して置き換えます。たとえば、フィルターはサポートされなくなり、v-model の使用法も変更されました。

ステップ 4:

サードパーティのコンポーネントライブラリやプラグインなどの依存関係を Vue3 に適合するバージョンにアップグレードする

ステップ 5:

プロジェクトコードの構文が正しくコンパイルされていることを確認したら、コード内のビジネスロジックが正しいかどうかを確認して、プロジェクトを完全に実行できるようにする必要があります。

ステップ 6:

TypeScript を使用して JS コードをリファクタリングする: TypeScript は JavaScript よりも静的な型チェックが多く、新しい構文もいくつか追加されています。ただし、この手順は時間がかかりますが (JS コードを 1 回変更するのと同等であるため)、JS と TS はプロジェクト内に同時に存在できるため、徐々に置き換えることができます。

アップグレードツール

オープンソースツールのgogocode ドキュメントを介して、上記の手順 1、2、および 3 の変換を実行できます。

ps : ツール変換コードには不明な点が多く、より複雑なプロジェクトビジネスコード (フォームのリンク、ルールの検証など) の一部は、元のロジックに影響を与える可能性があり、1 つずつ手動で比較およびテストする必要があります。一。

アップグレードに必要な変更

1.グローバルAPI

アプリケーションインスタンスを使用するようにグローバル Vue API が変更されました
グローバルおよび内部 API は、サポートするためにリファクタリングされました。tree-shake

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

コンポーネントのv-model使用法が変更されて置き換えられましたv-bind.sync
<template v-for>および非v-forノードでの使用法がkey変更されました
同じ要素で使用されるv-ifとv-for優先順位が変更されました (v-ifより大きいv-for)
v-bind=“object”センシティブなソート
v-on:event.native修飾子が削除されました
v-forref`ref 配列はもはや登録されていません

3. コンポーネント

機能部品は通常の機能でしか作成できない
functional attribute単一ファイルコンポーネント (SFC) の<template>およびfunctionalで廃止予定
defineAsyncComponentメソッドを使用して非同期コンポーネントを作成する必要がある
コンポーネントイベントをemitsオプション

4. レンダリング機能

レンダリング関数 API の変更
$scopedSlots property削除され、すべてのスロットが関数$slotsとして
$listeners削除または統合されました$attrs
$attrs現在含まclassれてstyle attribute

5. カスタム要素

テンプレートのコンパイル時にカスタム要素の検出が実行されるようになりました
is attribute特別な使用法は、予約済みの<component>タグに厳密に限定されています

6.その他のマイナーチェンジ

destroyedライフサイクルオプションの名前がに変更されましたunmounted
beforeDestroyライフサイクルオプションの名前がに変更されましたbeforeUnmount
default propファクトリ関数はこのコンテキストにアクセスできなくなりました
カスタムディレクティブの API は、コンポーネントのライフサイクルに合わせて変更され、削除binding.expressionされました
dataオプションは常に関数として宣言する必要があります
mixinからのオプションはdata浅いマージになりました
Attribute適用ポリシーが変更されました
一部のトランジショナルの名前が変更されclassました
<TransitionGroup>ラッパー要素はデフォルトでレンダリングされなくなりました
配列をリッスンするとき、コールバックは配列が置き換えられたときにのみ起動します。変更時に起動する必要がある場合は、ディープオプションを指定する必要があります
特別なディレクティブ (v-if/else-if/else、v-for、または v-slot) のないタグは<template>、通常の要素として扱われ、レンダリングされるようになりました
内部コンテンツをレンダリングする代わりのネイティブ<template>要素。
マウントされたアプリケーションは、それがマウントされている要素を置き換えません
ライフサイクルのhook:イベントのように変更されます。vnode-

7. 削除された API

keyCodev-on修飾子としてサポート
on、offおよび$onceインスタンスメソッド
フィルター
インラインテンプレートattribute
$children例property
propsDataオプション
$destroyインスタンスメソッド。ユーザーは、個々の Vue コンポーネントのライフサイクルを手動で管理する必要がなくなりました。
グローバル関数setおよびdeleteインスタンスメソッド$setおよび$delete. プロキシベースの変更検出では不要になりました
Element および Element Plus のフレームワークも変更されています. Element Plus のドキュメントを参照してコンポーネントの使用法を調整してください.

参照文書

Vue2 大規模プロジェクトアップグレード Vue3 詳しい経験まとめ