1.Vue 2
Vue will traverse all the content in the template, and generate corresponding virtual DOM according to these tags (virtual DOM generally refers to using key/value objects to save the attributes and contents of tag elements), when there is a content change, traverse the virtual DOM to find the change Different content before and after, this process is called diff
2. Vue3 reconstructs virtual DOM and event cache
- Flag static content, and distinguish dynamic content (static promotion).
- Only the dynamic part is diffed when updating.
(Virtual DOM) Vue 3 will first distinguish the nodes of the dynamic content, and only target these nodes when diffing, thereby reducing resource waste and improving performance.
(Event cache) When binding DOM events in vue2.x, such as @click, these events are considered dynamic variables, so every time the view is updated, its changes will be tracked, and then a new one will be regenerated every time it is triggered The function, in Vue 3, provides the event cache object cacheHandlers. When cacheHandlers is enabled, the event bound by @click will be marked as a static node and put into cacheHandlers, so that it will not be tracked when the view is updated. When the event is triggered again, there is no need to regenerate the function, just call the cached event callback method directly, which improves the performance of Vue in terms of event processing