Scribd
Upload
78 views

Evan You On The Virtual DOM - Advanced Components - Vue Mastery

Evan You, the creator of Vue, discusses the virtual DOM (VDom) implementation in Vue. He credits snabbdom, which he forked to create Vue's VDom. The modular design of snabbdom separates concerns into modules. Evan wishes to further optimize the VDom to improve performance through static analysis and other techniques. While the VDom comes with trade-offs of slower updates compared to directly updating the DOM, Evan clarifies it is needed due to the power of render functions, which allow complex arbitrary logic and higher order components.

Uploaded by

kid cobain
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
78 views

Evan You On The Virtual DOM - Advanced Components - Vue Mastery

Evan You, the creator of Vue, discusses the virtual DOM (VDom) implementation in Vue. He credits snabbdom, which he forked to create Vue's VDom. The modular design of snabbdom separates concerns into modules. Evan wishes to further optimize the VDom to improve performance through static analysis and other techniques. While the VDom comes with trade-offs of slower updates compared to directly updating the DOM, Evan clarifies it is needed due to the power of render functions, which allow complex arbitrary logic and higher order components.

Uploaded by

kid cobain
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

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

You might also like