Vue3とVue2の利点のまとめ

1. なぜ vue3 が必要なのでしょうか?

vue2 を使用すると、次のような不快な経験に遭遇することがよくあります。

1. 機能の増加と要件の増加に伴い、複雑なコンポーネントのコードはメンテナンスがますます困難になり、ロジックが混乱しています。Vue2にもいくつかの再利用方法がありますが、すべて特定の欠点があります。たとえば、よく使用するMixinは、特に名前の競合が発生しやすいです。公開された変数の意図はあまり明確ではなく、他のコンポーネントで再利用すると競合が発生しやすくなります。
2. Vue2 の typeScript のサポートは非​​常に限られており、ts の統合は考慮されていません。

vue3 の登場は vue2 の欠点を解決するためです。そのコンポジション API はロジックの再利用の問題を非常にうまく解決します。さらに、vue3 のソース コードは ts で記述されており、ts を非常にうまくサポートしています。プロジェクト開発中に ts を使用すると、コードをより堅牢にすることができます。

2. vue3の利点

1. Vue3はVue2のほとんどの機能をサポートしており、Vue2と互換性があります。
2. Vue3はVue2に比べて明らかにパフォーマンスが向上しています。
   1. パッケージサイズを41%削減
   2. 初期レンダリングが55%高速化、更新が133%高速化
   3. メモリ使用量が54%削減
3. Vue3のコンポジションAPIはロジックのモジュール化と再利用を可能にします
4. テレポート コンポーネント、グローバル API の変更と最適化などの新機能が追加されました。
   

3. 応答原則の違い

Vue2.x は、特定のキーに基づいてデータを読み取り、変更する es5 の Object.defineProperty を通じて双方向データ バインディングの原則を実装します。 setter メソッドはデータハイジャックを実装するために使用され、getter メソッドはデータを変更するために使用されます。ただし、まずインターセプトして変更するキーを知っておく必要があるため、vue2 は、属性の追加と削除、配列のインデックスと長さの変更を監視できないなど、新しく追加された属性に対して何もできません。vue2 の解決策は、Vue.set(object, propertyName, value) などのメソッドを使用して、ネストされたオブジェクトに応答性を追加することです。

Vue3.x は、Object.defineProperty の代わりに、ES2015 のより高速なネイティブ プロキシを使用します。プロキシは、オブジェクトの前に「インターセプション」レイヤーを設定するものと理解できます。オブジェクトへの外部アクセスは、まずこのインターセプション レイヤーを通過する必要があります。したがって、プロキシは外部アクセスをフィルターして書き換えるメカニズムを提供します。プロキシはプロパティではなくオブジェクトを直接監視し、新しいオブジェクトを返すことができ、応答性が向上します。

4. ライフサイクルの違い

beforeCreate -> setup() を使用してください

作成された -> setup() を使用する

マウント前 -> マウント前

マウント済み -> onMounted

更新前 -> 更新前

更新済み -> onUpdated

beforeDestroy -> onBeforeUnmount

破棄 -> onUnmounted

エラーキャプチャー -> エラーキャプチャー

ページ内でライフサイクル機能を利用したい場合、vue2 のこれまでの操作ではページ内にライフサイクルを直接記述し、vue3 を参照する必要がありましたが、これが 3 がコードをより低いレベルに圧縮できる理由です。

5. デフォルトのプロジェクトディレクトリ構造の違い

Vue3 は、構成ファイル ディレクトリ、config および build フォルダーを削除し、static フォルダーを削除し、public フォルダーを追加し、index.html を public に移動します。views フォルダーが src フォルダーに追加され、ビュー コンポーネントとパブリック コンポーネントを分類します。

6.vue3はグローバルAPIを最適化します

Vue3 では、グローバル API と内部 API の両方がツリーシェイキングのサポートを考慮してリファクタリングされています。その結果、グローバル API は、ES モジュール ビルドからの名前付きエクスポートとしてのみアクセスできるようになりました。

'vue' から { nextTick } をインポートします
次のティック(() => {
  // DOM 関連のいくつかのもの})

エントリーファイル

// Vue2 の書き込み // vue2 のグローバル構成を変更すると、Vue オブジェクトのプロパティが変更されます // 異なるアプリで異なる構成の Vue オブジェクトを共有することも非常に困難です import Vue from 'vue'
'./App.vue' からアプリをインポートします。
Vue.config.xx=xx
Vue.use(...)
Vue.mixin(...)

新しいVue({
  レンダリング:h=>h(アプリ)
}).$mount('#app')

// Vue3 を 'vue' からインポートします
'./App.vue' からアプリをインポートします。
const app = createApp(APP) // アプリインスタンスを作成する app.config.xx=xx // 競合することなくインスタンスの構成を変更する app.use(...)
app.mixin(...)
app.mount('#app')

7. definePropertyの代わりにProxyを使用する

defineProperty に対する Proxy の利点

Object.defineProperty() には主に 3 つの問題があります。

• 配列の変更を監視できません
• オブジェクトの各プロパティを反復処理する必要があります
• 深くネストされたオブジェクトを走査する必要がある
  

プロキシは ES2015 仕様で正式に追加されました。次の機能があります。

• オブジェクトの場合: オブジェクトの特定の属性ではなく、オブジェクト全体が対象なので、キーを走査する必要はありません。これにより、前述のObject.defineProperty()の2番目の問題が解決されます。
• 配列をサポート: Proxy は配列メソッドをオーバーロードする必要がないため、多くのハックが排除されます。コードの量を減らすことはメンテナンス コストの削減を意味し、標準が最適です。

上記の 2 つの点に加えて、Proxy には次の利点もあります。

• Proxyの2番目のパラメータには13のインターセプションメソッドがあり、これはObject.defineProperty()よりも豊富です。
• 新しい標準として、Proxy はブラウザメーカーから多くの注目を集め、パフォーマンスの最適化が行われています。対照的に、Object.defineProperty() は古いメソッドです。

8. 詳細情報

vue3 ソースコード
vue3公式サイト

上記は、Vue2 と比較した Vue3 の利点の詳細な要約です。Vue2 と比較した Vue3 の利点の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。