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,
- By parsing the HTML template or render function from the component files and converting it to a Virtual Node representation.
- While doing the parsing, it records the nodes that have a dependency on dynamic data.
- Something like below
dynamicData = { data1: [ effect1, effect2, ... ], data2: [ effect4, effect5, ... ], ... }
- Effects are functions that define computations required to resolve certain data values.
- Effects also include render function for the Virtual nodes
- Render functions smartly converts virtual nodes to DOM elements
- Now whenever data1 changes Vue3 re-executes the corresponding effects and triggers update for subsequent data changes.
References:
- Vue3 Reactivity
- Vnode Transformation