Understanding Virtual DOM: An Introduction Using Snabbdom in Vue

Background: With the popularity of frameworks like Vue and React, virtual DOM has become widespread. The article introduces what virtual DOM is and how it works, using the Snabbdom algorithm employed by Vue as an example.

Why use virtual DOM: Frequent DOM access is performance‑heavy; virtual DOM reduces direct DOM manipulation by batching updates, improving performance for large applications. Many modern frameworks (React, Preact, Inferno) embed virtual DOM implementations.

Virtual node structure: Snabbdom represents a virtual node as a plain JavaScript object containing fields such as sel, key, data, children, text, and elm. Each field’s purpose is explained.

Creating real DOM nodes: The framework initializes a patch function via

var patch = snabbdom.init([
  require('../../modules/class').default,
  require('../../modules/hero').default,
  require('../../modules/style').default,
  require('../../modules/eventlisteners').default,
]);

with required modules, then calls patch(container, vnode) to recursively build the real DOM tree from the virtual node structure, finally replacing the container element with container.parentElement.replaceChild(vnode.elm, container).

Updating virtual nodes: Subsequent updates call patch(oldVnode, vnode), which diffs the old and new virtual nodes. The article shows a snippet of the diff algorithm, describing how children are added, removed, or updated, and how text content changes are handled:

//...
var elm = vnode.elm = oldVnode.elm;
//...
if (isUndef(vnode.text)) {
  if (isDef(oldCh) && isDef(ch)) {
    // update children
    if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue);
  } else if (isDef(ch)) {
    // add new nodes
    addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue);
  } else if (isDef(oldCh)) {
    // remove old nodes
    removeVnodes(elm, oldCh, 0, oldCh.length - 1);
  }
} else if (oldVnode.text !== vnode.text) {
  // update text content
  elm.textContent = vnode.text;
}
//...

Lifecycle hooks and modules: Snabbdom’s core is the virtual DOM library; additional functionality (styles, events) is added via modules passed to init. Example module code is

export const classModule = { create: updateClass, update: updateClass };

and the list of lifecycle hooks is ['create', 'update', 'remove', 'destroy', 'pre', 'post'].

Conclusion: The article provides a concise overview of the virtual DOM concept as implemented in Vue’s Snabbdom, setting the stage for a future analysis of React’s virtual DOM approach.