javascript-vueコンポーネントが作成されました

Question

図に示すように、4 つのボタンを順番にクリックして 4 つの異なるアイコンを表示する場合、アイコン コンポーネントの作成されたメソッドが初回のみ呼び出されるのはなぜですか

Answer 1

この現象は非常に興味深いものですが、その具体的な理由はまだ研究中です。

現象から、vue2.x 版では仮想 DOM が導入され、最適化処理が行われたことが原因ではないかと推測されます (1.x 版にはこの現象がないため)。

アイコンインスタンスを動的に作成する過程で、フレームワークが判断してレンダリングに使用するインスタンスが最小になるようです。たとえば、インデックス値が 1 から 2 に変化すると、Vue は現在アイコン インスタンスが存在し、今後表示されるアイコン インスタンスは 1 つだけであることを認識します。そのため、既存のインスタンスがプロセス全体に再利用されます。したがって、作成は 1 回だけ行われます。上記の 4 つの v-if 条件を、ある瞬間に 2 つの条件が満たされる (つまり、2 つのアイコンが同時に表示される) ように変更すると、create が 2 回発生します。

更新:

キーの使用に関しては、次のような証拠が公式 Web サイトで見つかりました。

key 特殊属性は主に、新しいノードのリストと古いリストを比較するときに Vue の仮想 DOM アルゴリズムのヒントとして使用され、キーがない場合、Vue は要素の移動を最小限に抑え、要素のパッチ/再利用を試みます。キーを使用すると、キーの順序変更に基づいて要素の順序が変更され、存在しないキーを持つ要素は常に削除/破棄されます。

しかし、公式ウェブサイトには次のようにも書かれています

要素/コンポーネントを再利用する代わりに強制的に置換するためにも使用できます。これは、次の場合に役立ちます。

コンポーネントのライフサイクル フックを適切にトリガーする

まさに仮想DOMの最適化プロセスです。上記のアイコンを毎回作成したい場合は、それぞれに異なるキー属性を追加します。

Answer 2

何を質問しているのかよくわかりません。vue の vue ライフサイクル フックをご覧ください。