This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Brief introduction of DOM to Virtual DOM to Render functions, and then Vue’s three core modules, finally through a simple example to understand the Vue responsive principle.

DOM

In short: the DOM is the API that the browser uses to change what is displayed on the screen.

If we load HTML into the browser, the browser creates these DOM nodes to display our web page in a tree structure:

<html>
  <head>
    <title>My title</title>
  </head>

  <body>
    <h1>A heading</h1>
  </body>
</html>
Copy the code

We can use JavaScript to manipulate these mapped DOM nodes:

let item = document.getElementsByTagName("h1") [0];
item.textContent = "New Heading";
Copy the code

DOM trees can have hundreds or thousands of nodes, and frameworks like Vue are designed to help us avoid a lot of repetitive and cumbersome JS calls.

But finding and updating thousands of DOM Nodes would obviously slow down browser rendering, so the Virtual DOM came along.

Virtual DOM & Render function

Virtual DOM is a way of representing the DOM in JavaScript objects.

For example, a div can be represented as a JS object, and a Vue can take the Virtual Node and mount it to the DOM to update what we see in the browser.

Vue creates a Render function from our HTML template to return VNode:

When the component is updated, the rendering function is rerun and a new virtual node is created. Vue compares the new node with the old node and updates the node on the web page. The diff algorithm is the most critical part of the entire virtual DOM, but I don’t know about it:

From Vitrual DOM to Actual DOM can be regarded as the mapping relationship between architectural blueprint and Actual building.

If I want to add some furniture to a floor of a building and change the layout, there are two ways:

  1. Tear down the whole floor and rebuildToo stupid.
  2. Create a new blueprint to compare with the old one, and then update it with minimal cost.

Approach 2 is how the Virtual DOM works, and Vue3 becomes much more efficient with updates.

3 core modules

  1. Reactivity Module

    Allows us to create JS responsive objects that can be observed to change as their code runs, and they can be traced to change their state as data changes occur.

  2. Compliler Module

    Get HTML templates and compile them into render function.

  3. Renderer Module

    Contains code for three different stages of rendering a component to a web page, which you will understand well after reading above:

A case in point

First the compiler module compiles the HTML to render function:

Initialize Reactive Object:

Render function (reactive Object) {render function (Reactive Object) {render function (Reactive Object) {render function (Reactive Object);

Then mount phase, using VNode to call the mount function to create the page:

If there is any change to the object we are monitoring, the rendering function will be called again to create a new VNode, which will be sent to patch Function to update the webpage as needed:

conclusion

Just began to learn Vue summary notes type of article, there are mistakes can comment informed.

Reference video:

  • Learn Vue.js with our Courses | Vue Mastery

  • Vue 3 Deep Dive with Evan You – YouTube