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関数の使用

推薦する

koa2 サービスに SSL を設定する方法

I. はじめに1: SSL証明書私のドメイン名は Tencent Cloud にあります。第 3 レ...

Ubuntu 20.04 LTS で Java 開発環境を構成する

Java開発キットjdkをダウンロードするJDK のダウンロード アドレスはhttp://www.o...

Vue は Tencent Map を統合して API を実装します (デモ付き)

目次執筆の背景プロジェクトの説明事前準備注記執筆の背景以前のプロジェクトではTencent Maps...

mysql バックアップ戦略の実装 (フルバックアップ + 増分バックアップ)

目次設計シナリオ技術的なポイントサーバー情報準備フルバックアップスクリプト(Mysql-FullyB...

検索データ表示を実装するJavaScript

この記事ではJavaScript検索のデータ表示コードを参考までに共有します。具体的な内容は以下のと...

Dockerイメージ内のnoneイメージ操作を削除する

普段はdocker buildコマンドでイメージを生成していますが、コードの更新が頻繁に行われるとn...

WeChatアプレットの世界的な状況の詳細な説明

序文WeChat アプレットでは、App.js の globalData を中間ブリッジとして使用し...

JavaScript で外部変数にアクセスするサブ関数の 3 つのソリューション

序文Web ページを作成するときに、次のような状況に遭遇することはよくあります。 <本文>...

画像の半透明処理 画像と半透明の背景の実装のアイデアとコード

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

曇り空のアイコン効果を実現する純粋な CSS

効果効果は以下のとおりです​実装のアイデアbox-shadow プロパティを使用して、複数の灰色の円...

10 種類のモダンなレイアウトを実現するための CSS コード

序文日曜日に自宅で web.dev の 2020 3 日間ライブを視聴したところ、興味深い点がたくさ...

ウェブページを開いて数秒後に他のページにリダイレクトする

これを実現するには、次のコードを追加するだけです。方法1: メタを使用する使用方法: <Met...

Centos7 に Nginx 統合 Lua サンプル コードをインストール

序文私が使用しているパソコンはMacで、OSはmacOS Mojaveです。コンピュータに仮想マシン...

HTML 縦列表示テキストを使用してテキストを縦列で表示します

コードをコピーコードは次のとおりです。 <span style='display:bl...

CSS の子要素を親要素と高い一貫性を持たせる方法

絶対位置決め方式: (1)親要素を相対配置に設定します。親要素の高さを指定しない場合は、左の子要素の...