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 をよろしくお願いいたします。