vue3ソースコード解析の簡単な実装方法

vue3ソースコード解析の簡単な実装方法

序文

最近、私の最初の公式 vue3 + ts プロジェクトが承認段階に入りました。皆さんがいつも vue3、vue3 について話しているのを聞いて、vue3 と vue2 の違いが何なのか知りたくなりました。 🤷🏻‍♀️🤷🏻‍♀️🤷🏻‍♀️

この記事では主にvue3のAPIの使い方を説明し、簡単にvue3を実装します。 vue3 と以前の vue2 の違いをお見せしましょう。そして、ソースコードでの vue3 初期化のプロセスを簡単に説明します。

🍹準備

vue3 内のソースコードがどのように作成されているかを確認したい場合は、まず、vue2 ソースコード分析と同様に、github からソースコードのコピーをローカルコンピューターにダウンロードします。

次に依存関係をインストールします。

糸 --ignore-scripts

コマンドを実行すると、ノードのバージョンが低すぎるというエラーが発生する場合があります。

この問題を解決するには、ノードのバージョンをアップグレードするか、エンジンを無視します。

無視する場合は、

yarn config で --ignore-engines を true に設定する

次に依存関係のインストールを実行します。

依存関係がインストールされたら、コンパイルしてパッケージ化し、vuejs ファイルを生成します。

糸開発

デバッグが必要な場合は、packages\vue\examples ファイルの下にテスト ファイルを作成できます。パッケージ化された vue ファイルを参照するには、packages\vue\dist\vue.global.js を適用できます。

🍲vue3 の使い方

vue3 の機能については詳しく説明しません。vue3 の使用法に関しては、関数型プログラミングに傾倒しています。Vue で createApp() API を公開することで、ファクトリー関数の形式でアプリケーション インスタンスが作成されます。 vue2 の新しい Vue インスタンスと比較すると、より適切です。

ソース コード ファイルで、新しい init.html ファイルを作成します。

<script src="../dist/vue.global.js"></script>
 <本文>
  <div id="app">{{名前}}</div>
  <スクリプト>
    const {createApp} = Vue
    const app1 = createApp({
      データ() {
        戻る {
          名前: 'clying'
        }
      },
      設定() {
        戻る {
          名前: 'deng'
        }
      }
    }).mount('#app')
  </スクリプト>
</本文>

上記の例から、vue3 は Composition API と Options API の両方をサポートしており、両方を同時に使用できることがわかります。

ただし、データとセットアップの両方で、割り当てに名前変数を使用していることがわかります。では、ページにはどれが表示されるのでしょうか?

3!2!1!前回の回答:

セットアップがcomposition-apiで優先されていることが明確にわかります。

もちろん、ソース コード packages\runtime-core\src\componentPublicInstance.ts では、スイッチが最初に setup 内の変数が存在するかどうかを判断し、次に data 内の変数を判断するために使用されていることも確認できます。したがって、セットアップ内の変数の優先順位は、データ内の変数の優先順位よりも高くなります。

🍖 実装

上記の使用方法から、vue3 は Vue 変数を外部に公開し、内部には createApp や reactive などのメソッドがあることがわかります。

ここでは、まずvue3の初期化フレームワークを実装します。 createApp の場合、ユーザーから渡されたパラメータ (data()、setup() など) を受け取り、最後にインスタンスをマウントします。したがって、createApp ではいくつかのパラメータ オプションが受け取られ、内部にマウント メソッドも存在します。

定数Vue = {
    createApp(オプション) {
      戻る {
        mount(selector) { // 解析、取得、レンダリング、マウント}
      }
    }
}

マウントのセレクターを通じてホスト要素を取得します。

次のステップはテンプレートをコンパイルすることです。テンプレートを AST にコンパイルした後、レンダリング関数に変換する必要があります。ここでは操作を簡略化し、コンパイル時にレンダリングを直接返します。

mount(selector) { // 解析、取得、レンダリング、マウント const parent = document.querySelector(selector)
  console.log(親);
  if (!options.render) {
    // コンパイルしてレンダリングを返す
    options.render = this.compileToFunction(parent.innerHTML)
  }
},
compileToFunction(テンプレート) {
  関数render()を返す{
    定数 h = document.createElement('div')
    h.textContent = this.name
    戻る h
  }
}

レンダリングを取得したら、それを実行し、ホスト要素に追加して、古いノードを削除します。

レンダリングを実行するときは、this ポインターに注意する必要があります。これにデータをバインドすると、データ内の名前が表示されます。

mount(selector) { // 解析、取得、レンダリング、マウント const parent = document.querySelector(selector)
  console.log(親);
  if (!options.render) {
    // コンパイルしてレンダリングを返す
    options.render = this.compileToFunction(parent.innerHTML)
  }
  // レンダリングを実行する 
  const el = options.render.call(options.data())
  親.innerHTML = ''
  親.appendChild(el)
},

ページ上にclyingが表示されているのがわかります。逆に、options.setup() がバインドされている場合は、ページに deng が表示されます。

vue3 の使用においては、セットアップがデータよりも優先されることがわかっています。次に、プロキシを使用して、セットアップを優先しながら、プロキシを介して 2 つの属性変数を結合できます。同じ名前にアクセスする場合、実際にはセットアップ内の名前にアクセスします。

mount(selector) { // 解析、取得、レンダリング、マウント const parent = document.querySelector(selector)
  console.log(親);
  if (!options.render) {
    // コンパイルしてレンダリングを返す
    options.render = this.compileToFunction(parent.innerHTML)
  }
  if (オプション.setup) {
    this.setupState = オプション.setup()
  }
  if (オプション.データ) {
    this.data = オプション.data()
  }
  this.proxy = 新しいProxy(this, {
    get(ターゲット, キー) {
      if (target.setupState のキー) {
        target.setupState[キー]を返す
      } そうでない場合 (target.data 内のキー) {
        target.data[キー]を返す
      }// propsやwatchなど同じ名前の変数が他にもある可能性があります}, 
    set(ターゲット、キー、値、newVal) {
      console.log(ターゲット、キー、値、newVal);
    }
  })
  // レンダリングを実行する this.proxy はセットアップとデータを統合するコンテキストです const el = options.render.call(this.proxy)
  console.log(el, オプション.render);
  親.innerHTML = ''
  親.appendChild(el)
},

プロキシ取得では、まずターゲット属性がセットアップ内に存在するかどうかを確認します。存在する場合は、セットアップ内の属性変数が返され、存在しない場合は、データ内の属性変数が返されます。レンダリングするときは、統合された変数セットを渡すだけです。もちろん、プロキシには set メソッドもあります。最初にプロキシし、その後、トリガーする前に外部から変数を取得して変更する必要があります。興味のある学生は自分で学習できます。

要約する

これで、vue3 ソースコード解析の簡単な実装に関するこの記事は終了です。より関連性の高い vue3 ソースコード解析コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue3.0 レスポンシブ システムのソース コードの行ごとの分析
  • Vue3 ソースコードガイド(推奨)
  • Vue3.xソースコードデバッグの実装方法

<<:  Alibaba Cloud Server への Web プロジェクトのデプロイについて (5 つの手順)

>>:  CentOS 7 で MySQL 8 の複数のインスタンスを設定する詳細なチュートリアル (必要な数だけ設定できます)

推薦する

HTMLの基礎を徹底解説(第1部)

1. WEBを理解するWeb ページは主にテキスト、画像、ハイパーリンクなどの要素で構成されていま...

HTML における相対と絶対の使用法と違いの詳細な説明

HTML における相対と絶対の違い: 正直に言うと、HTML は世界で最もシンプルな言語です。タグ言...

MYSQL スロークエリとログ設定とテスト

1. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...

mysql 行列変換サンプルコード

1. 需要3 つのテーブルがあります。一定期間にわたるさまざまな抗生物質感受性の結果、つまり rep...

MySql への新しいユーザーの追加、ユーザー用のデータベースの作成、ユーザーへの権限の割り当ての概要

1. 新しいユーザーを追加するローカルIPアクセスのみを許可する '123456' ...

MySQL ファジークエリステートメントコレクション

SQL ファジークエリステートメント一般的なファジーステートメントの構文は次のとおりです。 SELE...

Vue3.0のさまざまなリスニング方法の包括的な概要

目次リスナー1.ウォッチエフェクト2.見る1.1 聴くための最初の方法1.2 聞く2つ目の方法1.3...

HTML でハイパーリンク タグを使用するチュートリアル

ウェブサイトのさまざまな HTML ドキュメントはハイパーリンクを通じて相互に接続され、一貫性のある...

MySQL v5.7.18 解凍バージョンのインストール詳細チュートリアル

MySQLをダウンロード5.1.1.1 より前のバージョン私のコンピュータは64ビットなので、Win...

SHTML 簡潔なチュートリアル

SHTMLとASPは似ています。SHTMLという名前のファイルでは、SSIの命令がASPの命令と同じ...

MySQL 上級学習インデックスの長所と短所、使用ルール

1. インデックスの利点と欠点利点: 高速検索、高速グループ化および並べ替えデメリット: ストレージ...

JavaScript の Strict モードの詳細な説明

目次導入厳密モードの使用厳格モードの新機能例外を強制的にスローする変数の使用を簡素化する議論を単純化...

Ubuntu Server でのワイヤレス ネットワーク カードの詳細な設定

1. ワイヤレス ネットワーク カードを挿入し、コマンドiwconfigを使用してワイヤレス ネット...

CSS3 における擬似クラスの一般的な使用法の詳細な説明

before/after 疑似クラスは、要素内に 2 つの追加タグを挿入するのと同じです。最も適した...

ローカルで起動したときに Vue プロジェクトがクッキーを保持できない問題を解決する

vueプロジェクトをパッケージ化してサーバーにデプロイし、正常にログインできるが、ローカルで起動する...