序文
これは、特定の操作後に「応答」しないリアクティブ オブジェクトに関する最新の 記事シリーズ です。
主な記録は、関連する vue の実装メカニズムです。
笑 この記事を理解するには、vue と js の使い方の基本が必要です
テストケース
ユースケースは次のとおりです。ここではイベント処理プロセスに焦点を当てます。
問題のデバッグ
イベント全体の処理は dom -> ElButton -> VueComponent.emit -> HelloWorld.handleClick です。
オブジェクト指向の観点から見ると、ElButton.handleClick はテンプレート メソッドであり、一部はコンポーネント自体の業務処理に固定され、一部はインスタンスを処理に使用する場所に残されます。
ElButton はクリック後のすべての業務を引き継ぎます。ElButton がクリックされた後に処理する必要がある業務を実行し、クリック イベントを発行します。このイベントの処理は、注意を払う特定のコンポーネント インスタンスに任せられます。 HelloWorld の el ボタンはコンポーネント インスタンスです]
ここで私たちはドムの草の根から見上げます
dom 上の実際のバインディング イベントはここでバインドされ、機能の層をカプセル化します。
ここで呼び出される受信ハンドラーは呼び出し元であり、呼び出し元は el-button のハンドラーによってバインドされたイベントに対応します。
上記の dom -> ElButton の変換は次のとおりです。
渡される関数は、上記の ElButton -> VueComponent.emit の変換です。
dom イベントのバインド ここでは、dom 要素を作成するときに、作成時に呼び出される一連のフックがあります。
ここで、updateDOMListeners は、現在の VNode に従ってすべての dom イベント ハンドラーを更新します。
ここには createFnInvoker パッケージ化の層があるため、コールバック関数が呼び出し元となり、呼び出し元が handleClick を呼び出します。
次に、VueComponent のイベント ハンドラーから VNode のイベント ハンドラーへの変換は、コンポーネントに対応する render 関数内で行われます。
この部分はVue自体のイベント処理に関係します。
登録されているイベント処理テーブルからクリックに対応するコールバックリストを取得し、順番に呼び出す
ここでの vm._events['click'] に対応する関数は、呼び出し元のレイヤーをラップした後の HelloWorld.handleClick です。
上記の VueComponent.emit -> HelloWorld.handleClick の変換は次のとおりです。
すると、この ElButton に対応する VueComponent インスタンスの初期化は次のようになり、initEvents の場所に関連するイベントが登録されます。
Vue コンポーネントの初期化時にリスナーを登録する
これは、VueComponent のイベント管理が登録されている VueComponent オブジェクトの _events で表示できます。
以上