Image

advanced-components

2 min read
Last update: December 19, 2021

Evan You on the Virtual DOM

If you watched the previous lesson then you’re familiar with the workings of template compilation and Virtual DOM (VDom) in Vue. In this video Evan You, the creator of Vue, talks about the creation of the VDom, the present state, and the future.

Initial implementation

Evan credits snabbdom, a VDom library which he forked to create Vue’s VDom. Snabbdom is simple, performant, extensible, and has a modular architecture.

The modular design helps separate concerns into modules such as style, classes, and attributes. This makes it easy for Vue to have its own modules to handle directives and ref. It also allows for the construction of a different patch functions with modules that target different platforms. This enables Vue to be platform agnostic and is what enables alternate platform implementations like Weex and Nativescript.

Improving the current Virtual DOM implementation

The Vue team wishes to further trim down the current implementation of the VDom to enable performance improvements.

The image above shows how the compilation phase can be further optimized for additional performance by doing static analysis amongst other improvements. Evan compares this to GNU Compiler Collection providing optimization levels to create a better assembly.

This way the template syntax can remain the same while the underlying implementation can be iteratively optimized over time.

Question: Do we really need a virtual DOM?

The VDom certainly comes with its own trade-offs. Abstracting the browser DOM into a virtual representation does make things slower when you compare it to directly updating the DOM.

Solution: The power of render functions

Evan clarifies that we need the VDom because of the power of render functions, where you get access to the power of JavaScript. Render functions can be used to create:

  • Functional wrapper components
  • Higher order components containing complex arbritrary logic

The view.js of the Vue Router is a perfect example of the power of render functions.

Up next

In the next lesson we’ll have a closer look at functional components and their usage.