Vue.js - Three Core Modules

Reactivity Module, Compiler Module, Renderer Module

# Three core modules

• Reactivity Module
• Compiler Module
• Renderer Module

# Reactivity Module

Reactivity module create JavaScript reactive objects that can be watched for changes.

When code which uses these objects are run they're tracked, so they can be run later if the reactive object changes.

# Compiler Module

Compiler module takes HTML templates and compiles then into render functions.

# Renderer Module

Renderer module takes three phases

• Render Phase
• Mount Phase
• Patch Phase

# Render Phase

The render function is called and it returns a virtual DOM node.

# Mount Phase

The render takes the virtual DOM node and makes DOM JavaScript calls to create a web page.

# Patch Phase

The render takes the old virtual node and the new virtual node, compares the two and updates only the parts of the web page that have changed using DOM JavaScript calls.

# Running Process

• 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.