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 にアップグレードする

推薦する

CSS 3D からソースコードによる空間座標軸へ

かつて、サイコロを振るゲームについて話しました。その時は、steps 属性 + スプライト画像を使用...

MySQL で UTF-8 エンコーディングを使用しないのはなぜですか?

MySQL UTF-8 エンコーディングMySQL は 2003 年のバージョン 4.1 から U...

BootStrap グリッド間に隙間を残す解決策

目次[例を見る]: 【本来の効果は以下の通り】理由は次のとおりです。 【解決】:要約するBootSt...

UDP DUP タイムアウト UPD ポート状態検出コード例

以前、単純な UDP サーバーとクライアントの例を書きましたが、その中で、自分自身をクライアントと見...

Vue ルーティングフォールバックに最適なソリューション (vue-route-manager)

目次ルーティングマネージャー背景はじめる問題を解決する方法要約するルーティングマネージャー各ジャンプ...

WEB 標準ウェブページ構造

背景画像でも、ページ上のテキストサイズでも、1 ピクセルの違いは非常に明白です。そして、私は学生時代...

JS で配列をループする 4 つの方法のまとめ

この記事では、配列を走査する 4 つの方法を比較してまとめます。 for ループ: for (let...

スクロールバーを非表示にしてコンテンツをスクロールする CSS サンプルコード

序文ページの HTML 構造にネストされたボックスが多数含まれている場合、ページに複数の垂直スクロー...

Linuxシステムの操作レベルの詳細な紹介

目次1. Linuxシステムの操作レベルの概要2. 実行レベルを確認する3. 現在のシステムの動作レ...

HTML の一般的でないタグ optgroup、sub、sup、bdo のサンプルコード

Optgroup は、ドロップダウン リストのコンテンツをより整理するために、select タグで使...

type=fileファイル変更フォームの名前が正常にエコーされない問題を解決

easyui フレームワークのコードは次のとおりです。 css: .ファイルボックス{ フロート:...

IE6 での PNG アルファ透明度 (完全コレクション)

IE6 は PNG の透明度をサポートしていないと多くの人が言っています。実際、IE は 100%...

スプレッド演算子のサンプルコードと JavaScript での応用

スプレッド演算子を使用すると、式をある時点で展開できます。スプレッド演算子は、複数のパラメーター (...

Vue のルータールーティングの 2 つのモード (ハッシュと履歴) の詳細な説明

ハッシュモード(デフォルト)動作原理:ウェブページのハッシュ値の変化を監視する—> onhas...

3Dカルーセル効果を実現するjs

この記事では、3Dカルーセル効果をjsで実装するための具体的なコードを参考までに共有します。具体的な...