vue で単一コンポーネントのデータを動的に変更するときにすべての再レンダリングを実装する方法

ここで、単一の Vue コンポーネントでデータを動的に変更する場合のすべての再レンダリングに関する記事を共有します。これは優れた参考値であり、皆さんのお役に立てれば幸いです。

今日vueを学習している過程で、興味深い現象を発見しました。

特定のコンポーネントの特定のデータがクリック イベントを通じて動的に変更されると、ビュー内の対応するデータが同期的に変更されます。これはナンセンスではありませんか。Vue の主な機能はデータの双方向バインディングです。 。興味深いのは、このコンポーネントの下で私が書いた Math.random() を使用して別のデータ値に対応する値とビューも変更されていることです

これは私のような初心者にとっては少し奇妙になるため、変更します。 2つに変わった? ? ? ?たとえば、データが両方向で同期されているときに何かが起こるのではないかと考えてみましょう。 1 つのノードが変更される限り、そのノードはリロードされるというのは本当ですか? ? ?

これは、vue データの双方向バインディングの原理に関連しているはずだと思い、検索したところ、DocumentFragment というものを見つけました。以前に見たことがあるようなのですが、お金を払いませんでした。それには十分注意してください。それで、それは何に使用されますか:

DocumentFragment (ドキュメントフラグメント) は、複数の子ノードを含むことができ、その子ノードのみがターゲットノードに挿入されます。これをノードのセットのコンテナーとして考えてください。 DocumentFragment を使用してノードを処理すると、DOM を直接操作するよりもはるかに高速かつ優れています。

手動の強調: Vue がコンパイルされると、マウント ターゲットのすべての子ノードがハイジャックされます (実際には、append メソッドを介してハイジャックされ、DOM 内のノードは自動的に削除されます)。いくつかの処理の後、DocumentFragment が全体として返され、マウント ターゲットに挿入されます。

上記は私があなたのためにまとめたものです。

関連記事:

JQueryはselectコンポーネントの選択値メソッドを選択

$setとvue.js_vue.jsの配列更新メソッド

react-router4メソッドでのコード分割(ベース) webpack)

以上がvue で単一コンポーネントのデータを動的に変更するときにすべての再レンダリングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。