【Vue3知識講座2】Vue3の新機能、デバッグツールvue-devtools、足場構築

ネット 2023-09-11 19:34:06 訪問数: null

記事ディレクトリ

1. Vue3の新機能

1.1 双方向データバインディングを書き直す

1.1.1 Vue2 は Object.defineProperty() に基づいて実装されています

デジタル管理プラットフォーム
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
許可システム - モール
個人ブログアドレス

Vue のコア メソッド defineReactive を次のように簡略化します。

function defineReactive (obj, key, val, cb) {
    var dep = new Dep();
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: ()=>{
            /*....依赖收集等....*/
            dep.depend()
            return val
        },
        set:newVal=> {
            val = newVal;
            /*触发回调*/
            dep.notify()
        }
    })
}

Vue は、defineReactive メソッドを使用して、監視する必要があるオブジェクトの各プロパティを監視します。dep オブジェクトはディスパッチ センターに相当します。この属性を使用するデータがあれば、その属性をディスパッチ センターに自動的に収集します。特定の属性が変更された場合は、ビューを更新するようにディスパッチ センターに通知します。

1.1.2 プロキシ実装に基づく Vue3

let proxyObj = new Proxy(obj,{
    get : function (target,prop) {
        return prop in target ? target[prop] : 0
    },
    set : function (target,prop,value) {
        target[prop] = 888;
    }
})

プロキシには、Object.defineProperty(obj, prop, desc) メソッドと比較して次の利点があります。

  • 面倒なバックアップデータは捨てる**
  • for in ループを省略する
  • アレイの変更を監視できる
    • コードがよりシンプルになりました
  • 動的に追加されたプロパティを監視できます
  • 削除をリッスンできる属性
  • 配列のインデックスと長さのプロパティをリッスンできます。

1.2 仮想 DOM の最適化

Vue2 では、差分が更新されるたびに完全に比較されますが、Vue3 ではマークされたもののみが比較されるため、非動的コンテンツの比較消費が大幅に削減されます。

Vue Template Explorer この Web サイトから静的マークアップを確認できます
ここに画像の説明を挿入します

  • パッチフラグは静的ツリーを最適化します

    <span>Hello world!</span>
<span>Hello world!</span>
<span>Hello world!</span>
<span>Hello world!</span>
<span>{
     
     {msg}}</span>
<span>Hello world!</span>
<span>Hello world! </span>```

  • Vue3コンパイルしたものはVdom次のようになります

    export function render(_ctx，_cache，$props，$setup，$data，$options){return (_openBlock(),_createBlock(_Fragment,null，[
_createvNode( "span", null,"Hello world ! "),
_createvNode( "span",null，"Hello world! "),
_createvNode( "span"，null，"Hello world! "),
_createvNode( "span", null，"Hello world! "),
_createVNode("span", null，_toDisplaystring(_ctx.msg)，1/* TEXT */)，
_createvNode( "span", null，"Hello world! "),
_createvNode( "span", null，"Hello world! ")]，64/*STABLE_FRAGMENT */))

  • パッチフラグタグを追加しました

    TEXT = 1 // 动态文本节点
CLASS=1<<1,1 // 2//动态class
STYLE=1<<2，// 4 //动态style
PROPS=1<<3,// 8 //动态属性，但不包含类名和样式
FULLPR0PS=1<<4,// 16 //具有动态key属性，当key改变时，需要进行完整的diff比较。
HYDRATE_ EVENTS = 1 << 5，// 32 //带有监听事件的节点
STABLE FRAGMENT = 1 << 6, // 64 //一个不会改变子节点顺序的fragment
KEYED_ FRAGMENT = 1 << 7, // 128 //带有key属性的fragment 或部分子字节有key
UNKEYED FRAGMENT = 1<< 8, // 256 //子节点没有key 的fragment
NEED PATCH = 1 << 9, // 512 //一个节点只会进行非props比较
DYNAMIC_SLOTS = 1 << 10 // 1024 // 动态slot
HOISTED = -1 // 静态节点
BALL = -2

動的 dom 要素を作成するとき、その基本情報をシミュレートすることに加えて、Vdom が 1 /* TEXT */ というマークも追加することがわかりました。このマークはパッチ フラグ (パッチ マーク) と呼ばれます。パッチ フラグの利点は、diff アルゴリズムが _createBlock 関数に到達すると、すべての静的ノードが無視され、マークされた動的ノードのみが比較され、マルチレイヤーのネストでも有効であることです。JavaScript での Vdom の比較は非常に高速ですが、パッチ フラグの登場により、特に大規模なコンポーネントをターゲットとする場合、Vue3 の Vdom のパフォーマンスが大幅に向上しました。

1.3 フラグメント

  • vue3 では複数のルート ノードをサポートできます

    <div>Hello World</div>
<div>Hello Vue</div>
<div :key="index" v-for="item,index in [10,20,304]">{
     
     {item}}</div>

  • レンダリングJSX記述メソッドもサポート

    render() {
    return (
        <>
            {this.visable ? (
                <div>{this.obj.name}</div>
            ) : (
                <div>{this.obj.price}</div>
            )}
            <input v-model={this.val}></input>
            {[1, 2, 3].map((v) => {
               return <div>{v}-----</div>;
            })}
        </>
    );
},

  • サスペンステレポートとマルチvモデルの使用も追加

1.4 木の揺れ

簡単に言うと、コードの実行結果は変えずに、無駄なコードを削除することです。

Vue2 では、どのような機能を使用しても、最終的には製品コードに組み込まれます。主な理由は、Vue インスタンスがプロジェクト内のシングルトンであり、バンドラーがコード内でオブジェクトのどのプロパティが使用されているかを検出できないことです。Vue3 ソース コードには、グローバル API をチャンクに分割するためのツリー シェーキング機能が導入されています。一部の機能を使用しない場合、それらは基本パッケージに含まれません。たとえば、watch を使用したい場合は、'vue' から {watch} をインポートするだけです。他の計算コンポーネントは、使用されなければパッケージ化されず、サイズが縮小されます。

1.5 合成API

コンポジション API (Composition API) は、オプションを宣言する代わりに関数を使用して Vue コンポーネントを作成できるようにする API のコレクションです。これは、次の API をカバーする包括的な用語です。

リアクティブ API: ref() や reactive() などを使用すると、リアクティブ状態、計算されたプロパティ、およびリスナーを直接作成できます。

ライフサイクル フック: onMounted() や onUnmounted() などを使用すると、コンポーネントのさまざまなライフサイクル ステージでロジックを追加できます。

依存関係注入: たとえば、provide() と inject() を使用すると、リアクティブ API を使用するときに Vue の依存関係注入システムを利用できます。

コンポジション API は、Vue 3 および Vue 2.7 の組み込み機能です。古い Vue 2 バージョンの場合は、公式にメンテナンスされているプラ​​グイン @vue/composition-api を使用できます。Vue 3 では、結合された API は基本的に一致します

<script setup>
	import { ref, onMounted } from 'vue'
	
	// 响应式状态
	const count = ref(0)
	
	// 更改状态、触发更新的函数
	function increment() {
	  count.value++
	}
	
	// 生命周期钩子
	onMounted(() => {
	  console.log(`计数器初始值为 ${count.value}。`)
	})
</script>

<template>
  <button @click="increment">点击了：{
   
   { count }} 次</button>
</template>

複合 API を使用すると、次の利点があります。

  • ロジックの再利用の向上
    結合 API の最も基本的な利点は、関数を組み合わせることで、より簡潔で効率的なロジックの再利用が可能になることです。オプションの API では、主なロジック再利用メカニズムはミックスインであり、結合された API はミックスインのすべての欠点を解決します。合成 API によって提供されるロジックの再利用性により、成長を続けるユーティリティ合成関数のコレクションであるVueUse
    など、いくつかの優れたコミュニティ プロジェクトが生まれました。
  • より柔軟なコード構成
    論理的懸念事項に関連するコードがグループ化され、論理的懸念事項の異なるオプション ブロック間を前後にスクロールする必要がなくなりました。さらに、このコード セットを外部ファイルに簡単に移動できるようになったため、抽象化のためにコードを再編成する必要がなくなり、リファクタリング コストが大幅に削減されます。これは、長期的なメンテナンスが必要な大規模プロジェクトでは重要です。
  • より良い型推論 合成
    API は主に、本質的に型に優しい基本的な変数と関数を利用します。合成 API で書き直されたコードは、型アノテーションをあまり書かなくても、完全な型推論を楽しむことができます。ほとんどの場合、TypeScript で記述されたコンポーザブル API コードは、JavaScript で記述されたコードとそれほど変わりません。
  • 実稼働パッケージのサイズが小さくなり、組み合わせた API を使用することで、同等のオプションの API よりも効率が向上し、コード圧縮にも適しています
    。<script setup> これは、<script setup> フォームに記述されたコンポーネント テンプレートがインライン関数にコンパイルされ、<script setup> のコードと同じスコープ内にあるためです。<script setup> プロパティにアクセスするためにこのコンテキスト オブジェクトに依存する必要があるオプション API とは異なり、コンパイルされたテンプレートは、インスタンスからプロキシすることなく、 で定義された変数に直接アクセスできます。ローカル変数名は圧縮できますが、オブジェクト プロパティ名は圧縮できないため、これはコード圧縮に適しています。

2. vue-devtools デバッグツール

vue によって公式に提供される vue-devtools デバッグ ツールを使用すると、開発者は vue プロジェクトのデバッグと開発を容易にできます。Chrome ブラウザは vue-devtools をオンラインでインストールします

  • vue 2.x デバッグ ツール

    https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

  • vue 3.x デバッグ ツール

    https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

注: vue2 と vue3 のブラウザ デバッグ ツールを相互に使用することはできません。

Chrome ブラウザの右上隅をクリックします [外部リンク画像の転送に失敗しました。ソース サイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-clRSTwtM-1672016260783) (Vue3 コース ノート) guide.assets/image-20221225220407446.png )] ボタンをクリックし、その他のツール -> 拡張機能 -> Vue.js devtools の詳細を選択し、次の 2 つのオプションを確認します。
ここに画像の説明を挿入します

注: 構成項目を変更した後、有効にするためにブラウザを再起動する必要があります。

ブラウザで vue を使用してページにアクセスし、ブラウザの開発者ツールを開き、Vue パネルに切り替えて、vue-devtools を使用して現在のページをデバッグします。
ここに画像の説明を挿入します

3. 環境構築

  1. 開発環境：Vite3+Vue3

    • 互換性: Vite には Node.js バージョン 14.18 以降、16 以降が必要です。ただし、一部のテンプレートを適切に実行するには、より高い Node バージョンが必要です。パッケージ マネージャーから警告が発行された場合は、Node バージョンをアップグレードしてください。
    • Vue3 は複合 API を使用します

  2. 公式に推奨される IDE 構成: Visual Studio Code

  3. Vite は足場を構築します。

    次のコマンドを実行してプロジェクトを初期化します

    npm init vue@latest

    このコマンドは、Vue の公式プロジェクト スキャフォールディング ツールであるcreate-vueをインストールして実行します。TypeScript やテスト サポートなどのいくつかのオプション機能のヒントが表示されます。

    ✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

    特定の機能を有効にするかどうかわからない場合は、Enter キーを直接押して選択できますNo。プロジェクトが作成されたら、次の手順に従って依存関係をインストールし、開発サーバーを起動します。

    cd <your-project-name>
npm install
npm run dev

    注: vite 公式コマンドを使用して vue プロジェクトを構成することもできます。

    npm init vite@latest
# or
npm create vite@latest

    Sass 前処理言語をインストールします。

    npm install --save-dev sass

4. 足場カタログのご紹介

  • public 以下のものはコンパイルされず、静的リソースを保存できます。
  • コンパイル可能な静的リソースはアセットの下に保存できます
  • コンポーネントは、以下のコンポーネントを保存するために使用されます
  • ルーターはルーティング関連ファイルを保存します
  • 状態管理関連ファイルを保存する
  • App.vue はグローバル コンポーネントです
  • main.js グローバル JS ファイル
  • Index.html は非常に重要なエントリ ファイルです (Vite のエントリ ファイルは HTML ファイルです。Vite は最初にこれらの JS ファイルをコンパイルしません。スクリプト src="xxxxx.js" などの使用するときのみ、リクエストを開始し、 vite によってインターセプトされる場合のみ、js ファイルが解析されます)
  • vite.config.js viteの設定ファイルです 具体的な設定項目については後ほど詳しく説明します

5. SFC構文仕様の解析

*.vue <template>ファイルは、 、<script>、の 3 種類の最上位構文ブロックで構成されます。<style>

  • <template>
    • 各ファイルには、一度に*.vue最大 1 つのトップレベル ブロックを含めることができます。<template>
    • コンテンツは抽出されてレンダー関数に渡され、レンダー関数@vue/compiler-domはプリコンパイルされJavaScript て、オプションとしてエクスポートされたコンポーネントに添付されますrender。
  • <script>
    • 各*.vueファイルには複数のブロックを含めることができます<script>(排他的<script setup>)
    • スクリプトはES Moduleとして実行されます。
    • デフォルトのエクスポートされたコンテンツは、Vue コンポーネント オプション オブジェクトである必要があります。これは、通常のオブジェクトまたはdefineComponent の戻り値のいずれかです。
  • <script setup>
    • 各 *.vue ファイルには最大 1 つのブロックしか含めることができません<script setup>(通常のブロックを除く<script>)
    • スクリプトは前処理され、setup()コンポーネントの関数として使用されます。つまり、各コンポーネント インスタンスで実行されます。<script setup>最上位のバインディングは自動的にテンプレートに公開されます。<script setup>詳細については、ドキュメントを参照してください。
  • <style>
    • ファイル*.vueには複数のタグを含めることができます<style>。
    • <style>タグはscoped、 またはを介し​​て module attribute現在のコンポーネント内のスタイルをカプセル化できます (詳細については、「SFC スタイル プロパティ」を参照してください)。異なるパッケージング モードのタグを<style>同じコンポーネント内に混在させることができます。

付録: 国内淘宝ミラーリング戦略を採用することをお勧めします

Taobao イメージをグローバルにインストールする

npm install -g cnpm --registry=https://registry.npm.taobao.org

おすすめ

転載: blog.csdn.net/qq_39335404/article/details/132619988
おすすめ
Arc Browser for Windows 1.0 が正式に提供開始
1990 年代生まれのプログラマーがビデオ移植ソフトウェアを開発し、1 年足らずで 700 万以上の利益を上げました。結末は非常に懲罰的でした。
ランキング
パフォーマンスプロファイラを実装する機能のようなCPPマクロ| C ++コードのパフォーマンステストを簡素化するためにマクロを使用する方法
クリック率を推定するための「特効薬」はありませんが、モデル構造よりも重要なことは何ですか？
Flink的重启策略（RestartStrategy）实战
Implementado en base a la tecnología de reconocimiento de huellas de voz Qualcomm SOC
Android custom encryption and decryption for playing audio and video (m3u8 independent encryption)
Oracleマルチテーブル結合クエリ、統計的合計、グループ化
MapReduceのワークフローと動作原理
ボタンを複数回押したときはどうすればサウンドのオーバーラップをすることができますか？
導出と理解SVM
Mac に Appium をインストールする
アーカイブ
もっと
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(31)
2024-04-24(30)

コードワールド

© 2018 codetd.com