Vue.js - Three Core Modules
Three Core Modules of vue.js
Reactivity Module, Compiler Module, Renderer Module
Three core modules
- Reactivity Module
- Compiler Module
- Renderer Module
When code which uses these objects are run they're tracked, so they can be run later if the reactive object changes.
Compiler module takes HTML templates and compiles then into render functions.
Renderer module takes three phases
- Render Phase
- Mount Phase
- Patch Phase
The render function is called and it returns a virtual DOM node.
First, the compiler changes the HTML into a render function.
Then the reactive objects are initialized using the reactivity module.
Next, the render module enter the render phase.
Render invokes the render function, whice references the reactive object.
Observer now watch this reactive object for changes, and the render function returns a vitural DOM node.
Next, in the mount phase, the mount function is called, using the virtual DOM node to create the web page.
Lastly, if any changes happen to our reactive object, whice is being watched, the render invokes the render function again, creating a new virtual DOM node.
Both the new and the old one Virtual DOM node, get sent into the patch function, which then makes updates to our webpage as needed.