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

1. ソースコード

1.1 モノレポ

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

1.2 タイプスクリプト

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

2. パフォーマンス

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

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

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

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

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

tree-shaking ES2015モジュール構文の静的構造 ( importとexportなど) に依存しています。コンパイルフェーズでの静的分析を通じて、インポートされていないモジュールを見つけてマークします。このテクノロジは、 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 、各ステージに対して、 methods 、 computed 、 data 、 props 、ライフフックのオプションを提供します。開発者は各 API で対応する操作を実行でき、それぞれが独自の役割を果たします。開始と理解にかかるコストは非常に低く、初心者の開発者にとって非常に使いやすいものです。小規模なプロジェクトの開発に使用する場合、コードの可読性と保守性もかなり優れています。しかし、大規模なプロジェクトやより複雑なビジネスロジックに遭遇すると、コードの保守が非常に難しくなります。関数を変更するために、コード内の複数の場所にジャンプする必要が生じることがよくあります。関数のコードがさまざまな場所に分散しているため、読み取りと理解のコストが急激に増加します。Composition Composition APIは、この問題を解決するための優れたメカニズムがあります。これは、特定の論理的な関心事に関連するすべてのコードを 1 つの関数に配置することで、関数を変更する必要がある場合に、ファイル内を行ったり来たりする必要がないようにすることです。

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

以下もご興味があるかもしれません: