序文最近、私の最初の公式 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Alibaba Cloud Server への Web プロジェクトのデプロイについて (5 つの手順)
>>: CentOS 7 で MySQL 8 の複数のインスタンスを設定する詳細なチュートリアル (必要な数だけ設定できます)
1. WEBを理解するWeb ページは主にテキスト、画像、ハイパーリンクなどの要素で構成されていま...
HTML における相対と絶対の違い: 正直に言うと、HTML は世界で最もシンプルな言語です。タグ言...
1. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...
1. 需要3 つのテーブルがあります。一定期間にわたるさまざまな抗生物質感受性の結果、つまり rep...
1. 新しいユーザーを追加するローカルIPアクセスのみを許可する '123456' ...
SQL ファジークエリステートメント一般的なファジーステートメントの構文は次のとおりです。 SELE...
目次リスナー1.ウォッチエフェクト2.見る1.1 聴くための最初の方法1.2 聞く2つ目の方法1.3...
ウェブサイトのさまざまな HTML ドキュメントはハイパーリンクを通じて相互に接続され、一貫性のある...
MySQLをダウンロード5.1.1.1 より前のバージョン私のコンピュータは64ビットなので、Win...
SHTMLとASPは似ています。SHTMLという名前のファイルでは、SSIの命令がASPの命令と同じ...
1. インデックスの利点と欠点利点: 高速検索、高速グループ化および並べ替えデメリット: ストレージ...
目次導入厳密モードの使用厳格モードの新機能例外を強制的にスローする変数の使用を簡素化する議論を単純化...
1. ワイヤレス ネットワーク カードを挿入し、コマンドiwconfigを使用してワイヤレス ネット...
before/after 疑似クラスは、要素内に 2 つの追加タグを挿入するのと同じです。最も適した...
vueプロジェクトをパッケージ化してサーバーにデプロイし、正常にログインできるが、ローカルで起動する...