How to implement all re-rendering when dynamically modifying data in a single component in vue

Now I will share with you an article about all re-rendering when dynamically modifying data in a single vue component. It has a good reference value and I hope it will be helpful to everyone.

In the process of learning vue today, I discovered an interesting phenomenon.

When a certain data under a certain component is dynamically modified through a click event, the corresponding data in the view is modified synchronously. Yes, isn't this nonsense? A major feature of Vue is data Two-way binding. What’s interesting is that the value and view corresponding to another data value using Math.random() written by me under this component have also changed

This makes me, a newbie, a little strange. , I modified one, how come two changed? ? ? ? Let's think about it for a moment and wonder if something might happen when the data is synchronized in both directions, for example. Is it true that as long as one node changes, the node will be reloaded? ? ?

I thought the reason for this must be related to the principle of two-way binding of vue data, so I searched for it and found something, which was DocumentFragment. I seemed to have seen it before, but I didn't pay much attention to it. So what is it used for:

DocumentFragment (document fragment) can be regarded as a node container. It can contain multiple child nodes. When we insert it into the DOM, only its child nodes will Insert the target node, so think of it as a container for a set of nodes. Using DocumentFragment to process nodes is much faster and better than directly manipulating the DOM.

Manual emphasis: When Vue compiles, it hijacks all the child nodes of the mounting target (really hijacks, through the append method, in the DOM The node will be automatically deleted) into the DocumentFragment. After some processing, the DocumentFragment will be returned as a whole and inserted into the mount target.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

JQuery selects the selected value method of the select component

$set and array in vue.js Update method_vue.js

Method for code splitting in react-router4 (based on webpack)

The above is the detailed content of How to implement all re-rendering when dynamically modifying data in a single component in vue. For more information, please follow other related articles on the PHP Chinese website!