19/4/2020 Evan You on the Virtual DOM - Advanced Components | Vue Mastery

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.

https://www.vuemastery.com/courses/advanced-components/evan-you-on-virtual-dom 1/3
19/4/2020 Evan You on the Virtual DOM - Advanced Components | Vue Mastery

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:

https://www.vuemastery.com/courses/advanced-components/evan-you-on-virtual-dom 2/3
19/4/2020 Evan You on the Virtual DOM - Advanced Components | Vue Mastery

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.

https://www.vuemastery.com/courses/advanced-components/evan-you-on-virtual-dom 3/3