Vue3とVue2の利点のまとめ

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 の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • vue2.0 と DataTable プラグインを組み合わせてテーブルを動的に更新する方法の詳細な説明
  • vue3とvue2の利点の比較
  • Vue2.0/3.0 での provide と inject の使用例
  • Vue2.xは、ユーザーのログインと終了を実装するためにルーティングナビゲーションガードを設定します。
  • vue2.x の徹底研究 - h 関数の説明
  • Vue2.x の応答性の簡単な説明と例
  • Vue2は応答性を提供するためにprovide injectを実装しています
  • レスポンシブ原則と Vue2.0/3.0 の違いについての簡単な分析
  • vue.config.js からプロジェクト最適化までの vue2.x 構成
  • 手書きの Vue2.0 データハイジャックの例
  • Vue2.x - アンチシェイクとスロットリングの使用例
  • ソースコードから、Vue2がデータとメソッドを直接取得できる理由がわかる

<<:  MySQL で重複しない携帯電話番号テーブルをバッチ生成する方法のサンプルコード

>>:  Windows Server 2008R2 ファイル サーバーを Windows Server 2016 にアップグレードする

推薦する

Vueのキャッシュ方法の例の詳細な説明

最近、「フロントエンドキャッシュ」という新しい要件が作成されました要件背景: フォームへの高頻度の繰...

さまざまなターミナルで Mac が SSH 経由でリモート サーバーに接続する方法の説明

Macはシェル(ターミナル)SSHを使用してリモートサーバーに接続します前提条件: 接続する必要があ...

ウェブサイトのホームページを作成するための基本原則

1. ウェブサイトのホームページのハイパーテキスト ドキュメントの構成構造は、ユーザーの注意をできる...

Apache クロスドメイン リソース アクセス エラーの解決策

多くの場合、大規模および中規模の Web サイトでは、静的リソース (フォント ファイル、画像など)...

MySQL 5.7のワンクリックインストールとパスワードポリシーの変更方法

1.Mysqlスクリプトのワンクリックインストール [root@uat01 ~]# cat Inst...

jsフェッチ非同期リクエストの使用の詳細な例

目次非同期を理解するフェッチ(url)レスポンス.json() asyncとawaitを組み合わせる...

Windows 10 インストール vmware14 チュートリアル図

ソフトウェアのダウンロードソフトウェアのダウンロード リンク: https://pan.baidu....

CSS 垂直センタリングの代替実装コードの詳細な説明(非従来型)

序文ご存知のとおり、「CSS で要素を垂直方向に中央揃えするにはどうすればよいか」という質問は、すで...

Win10 での MySQL 8.0.15 のインストールと設定のチュートリアル

最近私が学んでいるのは MySQL の知識なので、MySQL をインストールすることが非常に重要です...

Dockerのオンラインおよびオフラインインストールと一般的なコマンド操作

1. テスト環境名前バージョンセント7.6ドッカー18.09.06 2. オンラインインストールここ...

MySQL 外部キー (FOREIGN KEY) の使用例の詳細な説明

はじめに: すべてのデータを 1 つのテーブルに保存することのデメリット表の構成構造は複雑で不明瞭で...

HTMLの基礎を詳しく解説(第2部)

1. リストリスト ulコンテナーには、一貫した構造とスタイルを持つテキストまたはグラフの形式が読...

虫眼鏡効果を実現するJavaScript

この記事では、虫眼鏡効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。...

Centos に PHP7.4 と Nginx をインストールする方法

準備する1. 必要なインストールパッケージをダウンロードするhttps://www.php.net/...

Nginx フォワードプロキシとリバースプロキシの違いと原理分析

1. フォワードプロキシとリバースプロキシの違いフォワード プロキシはクライアントのプロキシとして機...