Understand the inner workings of the virtual DOM in React or Vue

Question

I'm a student and I'm trying to create my own virtual DOM for my college project (it won't have any advanced features like props or events, I'll keep it simple) like other famous frameworks React, Vue and so on.

I just want to know when we have multiple code files (code splitting). If I make a change to any deep child element, do I need to compare the complete virtual DOM (including all child elements and parent elements), or do I only need to compare that child element.

If I have to compare the complete new virtual DOM (including all children) with the previous virtual DOM. So why should I care about re-rendering in React or Vue (since any changes to the child will force the framework to compare the full Virtual DOM)

Answer 1

For Vue, Virtual DOM works differently in vue2 and vue3.

vue3’s approach is,

1. By parsing the HTML template or rendering function in the component file and converting it into a virtual node representation.
2. When parsing, it will record nodes that have dependencies on dynamic data.
3. As follows

4. Effects are functions that define calculations required to parse certain data values.
5. The effect also includes the rendering function of virtual nodes
6. The rendering function cleverly converts virtual nodes into DOM elements
7. Now whenever data1 changes, Vue3 will re-execute the corresponding effect and trigger updates for subsequent data changes.

references:

1. Vue3 Reactivity
2. Vnode conversion