This is the fifth day of my participation in Gwen Challenge.

preface

The virtual DOM is now familiar to most of you, so this article is just a note.

What is the virtual DOM

When I was young, I didn’t know about the virtual DOM. React has been open source since 2013, but I got my foot in the front end in 2015 and used jQuery to change views. Of course, there were some powerful frameworks, such as popular Backbone MVC framework. It was not until the second half of 2016 that VUe.js was introduced. With 17 years of experience in the development and use of vue.js, I quickly learned React in front of documents.

The early use of jQuery to change views was imperative manipulation of the DOM. Today, the three major frameworks vue. js, Angular, and React are declarative manipulators of the DOM. We can render the state into a view by describing how it maps to the DOM. We can update the View View by updating the ViewModel.

Any application has state, not just because it uses a framework. Variables used in programs are states.

Normally, the state of a program changes constantly as it runs. State changes can be caused by a user clicking a button or an Ajax request, all of which happen asynchronously. Every time the state changes, it needs to be rerendered. So, what state has changed, and which Dom do we need to update?

A more crude approach is to simply use the latest state, generate a new DOM and replace the entire old one. It is conceivable that the cost of doing this is relatively high, so is there a better way?

Of course there is.

Currently, the mainstream frameworks have their own set of solutions. As we mentioned earlier, Angular is dirty checking, React is the virtual DOM, and Vue. Js 1.0 is fine-grained dependency binding. So the virtual DOM is not a silver bullet.

The solution to the virtual DOM is to generate a virtual tree of nodes from the state and use it to render the view.

Why introduce the virtual DOM

Vue. Js implemented MVVM mode in 1.0, so why introduce the virtual DOM in 2.0?

We can’t know how it is without knowing why. The question is like “Why did React introduce hooks?” The same.

In Vue.js 1.0, when a state changes, it knows which DOM is using that state and can update those DOM directly. At the cost of this, however, you need to instantiate a Watcher for each node that uses state, so that when the state changes, the corresponding node can be updated directly. When the application is more complex, this approach can be very memory intensive.

So vue.js introduced the virtual Dom in 2.0, putting Watcher on components. No matter how many nodes in a component use a state, there is only one Watcher watching the state change.

The virtual DOM in vue.js

We can use template or render. The former is compiled into the render function at compile time, which produces a virtual tree of nodes and then renders the view.

Graph LR t[template]:: font --> r[render function]:::font subgraph virtual DOM v[vnode]:: font --> View [view]:: font end r --> v classDef font fill:#007fff,color: #fff

The process of converting a template into a view

We can render the view using a virtual tree of nodes. How do we update the view when state changes and a new tree of virtual nodes is created?

Using the new virtual node tree directly to generate the new view is certainly possible, but not optimal. Vue.js uses patch to compare the old and new vNodes, and directly updates the corresponding DOM during diff.

Graph LR v[vnode] subgraph Patch NV [vnode] --diff--> OV [oldVnode] --> NV end v --> nv ov --> view

conclusion

  1. The virtual DOM is one of many solutions for mapping state to views
  2. Vue. Js 2.0 introduces the virtual DOM, which willThe particle size is adjusted from fine to mediumTo reduce the memory overhead. Change detection is no longer refined to a node, but increased tocomponentLevel, greatly reducing the number of Watcher.
  3. What the virtual DOM does in vue.js is compare old and new VNodes and then manipulate the DOM to update the view.