Today, while learning VUE, 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 synchronized. That's right, isn't this nonsense? One of the major features of vue is the two-way binding of data. But interestingly, the value and view corresponding to the data value of () I wrote under this component has also changed.
This makes me a little bit strange, I am a little newbie who has just started. How come I changed one? ? ? ? Let go of your brain and think about whether the data will happen when synchronize in two directions, for example. Does the node reload as long as one node changes? ? ?
I think the reason must be related to the principle of two-way binding of vue data. So I searched and found something, which is DocumentFragment. I seemed to have seen it before, but I didn't pay much attention to it. So what is it for:
DocumentFragment 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 group of nodes. Using DocumentFragment to process nodes, the speed and performance are far better than direct operation of the DOM.
Manual focus:When Vue compiles, all child nodes of the mount target are hijacked (it is really hijacking. Through the append method, nodes in the DOM will be automatically deleted) into DocumentFragment. After some processing, the DocumentFragment is returned to the entirety of the mount target.
The above article briefly talks about all the re-rendering when dynamically modifying data under a single component of vue is all the content I share with you. I hope you can give you a reference and I hope you can support me more.