序文
これは、特定の操作後に「応答」しないリアクティブ オブジェクトに関する最新の 記事シリーズ です。
主な記録は、関連する vue の実装メカニズムです。
笑 この記事を理解するには、vue と js の使い方の基本が必要です
v-if テストケース
テストケースは次のとおりです。主に if を使用します。
ここでは、HelloWorld、VueComponent のレンダリングを追跡するだけです。
レンダリングされた VNode ツリーは、ページ上の dom ツリーの論理ミラー イメージです。
Vue は、VNode ツリーと dom ツリーの一貫性を維持します。これは、上でよく見られる patch と patchVNode に実装されています。
ここでHelloWorldのVueComponentに対応するレンダリングは以下のようになります。
カウンタに従って el-card をレンダリングする必要があるかどうかを判断し、VNode の構造を調整します
次に、vue は VNode ツリーと dom ツリーの一貫性を維持します。これは、上でよく見られる patch と patchVNode に実装されています。
v-show テストケース
テストケースは次のとおりです。単純な v-show を使用します。
ここでHelloWorldのVueComponentに対応するレンダリングは以下のようになります。
ここでの v-show の実装は、ディレクティブの構成を追加することです。
特定の dom のスタイルを更新する場所はここです。元のスタイルとなしを行ったり来たりできます。
v-テストケースの場合
テスト ケースは次のとおりです。単純な v-for を使用します。
ここでHelloWorldのVueComponentに対応するレンダリングは以下のようになります。
ここで、_vm._1 は vue の renderList の関数に対応し、指定されたリストを走査し、受信したコールバックに基づいて子ノードをレンダリングします。
ここでvueのrenderListの実装は以下のようになります
受信したレンダリング関数に基づいて、リストを走査し、現在の要素を渡し、最後にリストを返します。
以上