How Virtual DOM works in React or Vue

For Vue, The working of virtual DOM differs in vue2 and vue3.

The way vue3 does it, is,

1. By parsing the HTML template or render function from the component files and converting it to a Virtual Node representation.
2. While doing the parsing, it records the nodes that have a dependency on dynamic data.
3. Something like below

dynamicData = {
    data1: [ effect1, effect2, ... ],
    data2: [ effect4, effect5, ... ],
    ... }

4. Effects are functions that define computations required to resolve certain data values.
5. Effects also include render function for the Virtual nodes
6. Render functions smartly converts virtual nodes to DOM elements
7. Now whenever data1 changes Vue3 re-executes the corresponding effects and triggers update for subsequent data changes.

References:

1. Vue3 Reactivity
2. Vnode Transformation

Answer to your last point as I infer from my experience of React is that comparing Virtual DOM's in Javascript is the thing that helps react know what things it has to re-render on the actual DOM, So the "re-rendering" is the hard part on which the performance of the APP takes the hit. Hopefully, this would help.