序文
これは、特定の操作後に「応答」しないリアクティブ オブジェクトに関する最新の 記事シリーズ です。
主な記録は、関連する vue の実装メカニズムです。
笑 この記事を理解するには、vue と js の使い方の基本が必要です
この問題は、 VueComponent の応答処理のセクションが原因で発生します。コンソールで dom API を直接使用して、最も基本的な div ノードの textContent を更新し、ボタンをクリックしても応答更新が有効になっていないことがわかります 。
テストケース
テスト ケースは次のとおりです。単純なボタン イベントがトリガーされます。
問題のデバッグ
テンプレートは次のとおりです。ここでは主に el-card の下のテキスト コンテンツに焦点を当てます。
#text ノードが vue に作成されます
レンダリング後のhtmlは以下のようになります。
この #text ノードはページ dom からは見えないので、div.el-card__body の textContent を直接更新すると仮定します。そうすると、ボタンをクリックしてもコンテンツは再度更新されないことがわかります。
js APIを使用してdiv.el-card__bodyのtextContentを更新すると、その後どのようにボタンをクリックしても更新されなくなります
これは、実際の dom 構造の div.el-card__body の下に #text 子ノードの層があるためです。
ここで document.getElementsByClassName("el-card__body")[0].textContent = "nihao" を直接操作した後、新しい #text ノードを作成して div.el-card__body にマウントします。
調整メソッドが更新され、div.el-card__body の下の #text ノードを使用して更新するようになりました。
document.getElementsByClassName("el-card__body")[0].childNodes[0].textContent = "ニーハオ"
以上