純粋な JS を使用して vue.js で双方向バインディング機能を実装する方法

下のスクリーンショットをご覧ください

これは通常の HTML ファイルであり、Vue.js は導入されていません。コードの中に何か見覚えのあるものはありますか?たとえば、「v-model」、「v-on:click」、およびよく使用される「二重中括弧 {{}}」代入ステートメントなどです。

まず、双方向バインディングを実装するアイデアについて説明します。

1. 上記の wslVue オブジェクトのようなカスタム Vue js オブジェクトを作成します。初期化メソッドで必要なパラメータは、(1) マウントする DOM オブジェクト ID、(2) カスタム Vue オブジェクト (JSON オブジェクト) のデータ属性、(3) シミュレートされたマウント方法が後で追加されます。 （ここではパラメータ（1）と（2）が役立ちます。パラメータ（3）は、Vueオブジェクトの初期化作業がすべて完了した後にレンダリング（マウント）メソッドのコールバックを実行できることを前提とするために使用できます）。

2. vue 属性データ json オブジェクトの set メソッドと get メソッドを書き換えます。同時に、data 配下のすべての属性を vue オブジェクトに追加し、vue 生成属性の set メソッドと get メソッドを書き換えて、メソッド内で data の set メソッドと get メソッドを直接実行します (目的は、vue オブジェクト属性の読み取りと書き込みを dom 操作に直接使用することです)。

3. HTML を解析し、HTML 内のタグ ノードとテキスト ノードを再編成します (ここでの具体的な再編成とは、Vue 命令と {{}} 代入記号を通常の HTML ドキュメントに変換して出力することです)。解析プロセス中に、操作する必要がある各ノード (例: input タグ input) のキャッシュ、ロジックのバインド、リスニング イベントの追加を行います。

これらの機能を実装するための js の主な方法について説明します。

1. js オブジェクトのプロパティのメソッドを設定および取得します。

2. document.createDocumentFragment HTML フラグメント解析。

3. 関連する正規表現に基づいて HTML コード スニペットを再編成します。

最終的にどのようなツール クラスを作成する必要がありますか?

1. Vue オブジェクト。

2. オブザーバークラス Watcher は、操作する必要があるノードと、属性が変更されたときに実行する必要があるコールバックメソッドを保存します。

3. すべてのオブザーバー Watcher の管理クラス Dep を管理し、データの変更に関連する Watcher のコールバック レンダリングを制御します。

Vue双方向バインディングの実装

Vueオブジェクトの初期化メソッド

注:

1: data 内のすべてのプロパティを vue オブジェクトに追加し、set メソッドと get メソッドを書き換えます。

2: vue オブジェクトにメソッド管理メソッド オブジェクトを追加します。HTML を解析して v-on:click メソッドを取得するときに、タグにクリック イベント メソッド本体を追加します。

3: ここで HTML を解析します。解析中に処理が必要なノードに遭遇した場合は、Watcher オブジェクトを作成し、関連するノードと指示を Watcher オブジェクトに保存し、Watcher オブジェクトをオブザーバー管理クラスの Dep コレクションに追加します。

4: 初期化が完了したらマウントし、指定された DOM 要素に完全な HTML をレンダリングします。

コンパイルクラス解析には対応するDOMのマウントが必要

すべてのノードを取得する

特定の指示を解析する

ラベル要素とテキスト内容の判断

ここでタグノードの場合、内部のv-onおよびv-model命令を解析する必要があります。

vモデル

v-on:クリック

赤い線は、vue オブジェクト内のメソッドと一致するメソッドで、現在のノードにクリック イベントを追加します。

ノードがテキスト コンテンツの場合、内部の {{}} ディレクティブを解析する必要があります。

概要: ここで多くの Watcher オブジェクトが作成されます。オブジェクトは現在の vue オブジェクト、ノード、データ変更コールバックを保存し、Dep 管理クラスに保存されるため、データが変更されると、レンダリングのためにメソッド コールバックが直接実行されます。

具体的な指示判断

Watcher および Dep オブジェクト

最後にマインドマップを描きます

結論: 基本的な考え方はこれで終わりです。複雑なロジックはなく、表現力も限られています。これが皆様のお役に立てば幸いです。また、一緒に進歩していけるよう、マスターからの批判や訂正も受け付けます。

以上が、純粋な JS で vue.js の双方向バインディング機能を実装する方法の詳細です。vue の双方向バインディングを実装する JS の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。