Vue3のいくつかの利点についての簡単な説明

Vue3のいくつかの利点についての簡単な説明

Vue2 はすでに非常に優れており、完全なコミュニティとエコシステムを備えていますが、Vue3 はソース コード、パフォーマンス、構文 API という 3 つの主要な側面で最適化されています。

1. ソースコード

1.1 モノレポ

ソースコードの管理方法はmonorepoです。 monorepoこれらのモジュールを異なるpackageに分割し、各package独自の API、型定義、テストが含まれます。これにより、モジュールの分割がより詳細になり、責任の分担がより明確になり、モジュール間の依存関係がより明確になり、開発者がすべてのモジュールのソースコードを読み、理解し、変更することが容易になり、コードの保守性が向上します。

1.2 タイプスクリプト

Vue2時代にはflowが選ばれました。 flow自体には機能的な欠点があり、 TSの方が開発の勢いが強いため、 Vue3 TSを使ってコードを書くことを選択しましたTSをより良くサポートして開発体験を向上させることもできます。

2. パフォーマンス

2.1 ソースコードのサイズを最適化する

ソース コードのボリュームは、主に次の 2 つの側面から最適化されました。

filterinline-templateなどの人気のない API を削除します。

APIを減らすと必然的にコードサイズも小さくなるので、これは非常に理解しやすい。

バンドルサイズを縮小するためにtree-shakingを導入

tree-shaking ES2015モジュール構文の静的構造 ( importexportなど) に依存しています。コンパイル フェーズでの静的分析を通じて、インポートされていないモジュールを見つけてマークします。このテクノロジは、 webpackなどのパッケージング ツールで非常に人気があります。

Vue3 でのアプリケーション: Vueが提供するすべてのAPIを使用することはほとんどありません。単一のビジネス シナリオで使用されない、人気のない API が常に存在します。パッケージ化プロセスでは、ユーザーが使用しないこれらのAPIを削除して、パッケージ サイズを縮小できます。

2.3 プロキシ

Vue2以前、データハイジャックにObject.defineProperty使用していました。

Object.defineProperty(ソース、キー、{
  得る(){
    // やること...
  },
  セット(){
    // やること...
  }
})

いくつか欠点がある

  • ハイジャックされたkey何であるかを事前に知っておく必要があり、オブジェクト プロパティの追加と削除を十分に監視することはできません。
  • 初期化中にdata全体が再帰的に走査されるため、深くネストされたデータ構造ではパフォーマンスに負担がかかります。
  • Vue3データハイジャックにProxyを使用しており、 Object.definePropertyによって引き起こされる欠陥を効果的に回避できます。
p = 新しいプロキシ(ソース、{
  得る() {
    // やること...
  },
  セット() {
    // やること...
  }
})

2.4 コンポジションAPI

Vue3構文の面で最適化されており、主に元のOptions API Composition API APIを提供しています。

Options API 、各ステージに対して、 methodscomputeddataprops 、ライフフックのオプションを提供します。開発者は各 API で対応する操作を実行でき、それぞれが独自の役割を果たします。開始と理解にかかるコストは非常に低く、初心者の開発者にとって非常に使いやすいものです。小規模なプロジェクトの開発に使用する場合、コードの可読性と保守性もかなり優れています。しかし、大規模なプロジェクトやより複雑なビジネス ロジックに遭遇すると、コードの保守が非常に難しくなります。関数を変更するために、コード内の複数の場所にジャンプする必要が生じることがよくあります。関数のコードがさまざまな場所に分散しているため、読み取りと理解のコストが急激に増加します。Composition Composition APIは、この問題を解決するための優れたメカニズムがあります。これは、特定の論理的な関心事に関連するすべてのコードを 1 つの関数に配置することで、関数を変更する必要がある場合に、ファイル内を行ったり来たりする必要がないようにすることです。

Vue3 のメリットについての記事はこれで終了です。Vue3 のメリットについてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • vue3.0 のウォッチ リスナーの例の詳細な説明
  • Vue3.0のさまざまなリスニング方法の包括的な概要
  • vue3.0 sfcのセットアップの変更について簡単に説明します。
  • vue2 vue3 での Echarts の詳細な使用方法

<<:  CSS で 3 列レイアウトを実装するいくつかの方法と利点と欠点

>>:  MySQL DATE_FORMAT関数の使用

推薦する

Linux コマンドを使用してオーディオ形式を変換および結合する方法

FFmpeg flacをインストールする eric@ray:~$ sudo apt install ...

ウェブページの読み込み速度を上げる6つのヒント

第二に、キーワードのランキングは、Webページの表示速度にも関係しています(参照:キーワードランキン...

JSONP クロスドメインシミュレーション Baidu 検索

目次1. JSONPとは何か2. JSONPクロスドメインリクエスト3. Baidu検索をシミュレー...

Nginx+SpringBoot による負荷分散の実装例

負荷分散の概要Nginx の負荷分散実装を紹介する前に、負荷分散の分類について簡単に説明します。負荷...

NavicatがMySQL8.0.11に接続するとエラー2059が発生する

間違いNavicat Premium を使用して MySQL に接続すると、次のエラーが発生します。...

CSSはcalc()を使用して現在の表示画面の高さを取得します

まず、CSS3 の相対的な長さの単位を見てみましょう (詳細なチュートリアルを参照してください)。相...

仮想マシンに Windows Server 2008 オペレーティング システムをインストールする

この記事では、Windows Server オペレーティング システムのインストールと企業でのそのア...

MacにMySQLをインストールするときに忘れたパスワードを変更する方法

1. MacにMySQLデータベースをインストールする1. MySQLデータベースをダウンロードする...

MySQL InnoDB のロック機構の詳細な説明

前面に書かれたデータベースは本質的に共有リソースであるため、同時アクセスのパフォーマンスを最大化する...

kubernetes1.5.2 から kubernetes1.10 にアップグレードする際の主要な設定変更記録

この記事では、kubernetes1.5.2 から kubernetes1.10 にアップグレードす...

ubuntu20.04 LTSにdockerをインストールする方法

ゼロ: 古いバージョンをアンインストールするDocker の古いバージョンは、docker、dock...

webpack-dev-server のコア概念とケースの詳細な説明

webpack-dev-server コアコンセプトWebpack の ContentBase と ...

HTML で JavaScript を使用する

<script> タグHTML5では、スクリプトには次の属性があります: async、d...

Linux で Apache を使用してファイル サーバーを構築する手順

1. ファイルサーバーについてプロジェクトでは、公開ソフトウェアやデータをプロジェクト チーム メン...

VueはOpenLayersを使用してTiandi MapとAmapを読み込み

目次1. 世界地図1. VueにOpenLayersをインストールする2. アマップ1. 世界地図1...