Understanding Vue.js Internals: From Initialization to Virtual DOM

Global Overview

This section introduces the overall Vue.js internal process, giving readers a big‑picture view before diving into individual modules.

Initialization and Mounting

When new Vue() is executed, Vue calls the _init function, which initializes lifecycle hooks, events, props, methods, data, computed, and watch. The most important step is using Object.defineProperty to define reactive getter and setter functions for dependency collection and reactivity.

After initialization, $mount mounts the component. If runtime compilation is required (template without a render function), a compilation step is performed.

Compilation

Compilation is divided into three stages—parse, optimize, and generate—to produce a render function.

Parse parses the template with regular expressions and other techniques, converting it into an Abstract Syntax Tree (AST).

Optimize marks static nodes ( static) so that during updates the diff algorithm can skip them, improving patch performance.

Generate transforms the AST into a render function string and a staticRenderFns string, completing the compilation.

Reactivity

During init, Object.defineProperty binds getters and setters. When a property is read, its getter triggers dependency collection, storing the current Watcher in the Dep.subs array. When the property is later set, the setter notifies each stored watcher, which then calls update to re‑render the view.

Virtual DOM

The render function is transformed into VNode objects. The Virtual DOM is a tree of JavaScript objects that abstract the real DOM, enabling platform‑agnostic rendering (e.g., browsers, Weex, Node).

{
    tag: 'div', // a div element
    children: [
        {
            tag: 'a',
            text: 'click me'
        }
    ]
}

Rendering this VNode produces HTML like:

<div>
  <a>click me</a>
</div>

In practice, VNode nodes carry additional flags such as isStatic (static node) and isComment (comment node).

Updating the View

When data changes, Vue re‑executes the render function to obtain a new VNode. Instead of re‑rendering the entire DOM, Vue diffs the new VNode against the previous one using the patch algorithm, then updates only the changed DOM nodes, avoiding unnecessary work.

Overall Review

This overview provides a high‑level picture of Vue.js’s internal workflow, from initialization through compilation, reactivity, virtual DOM creation, and view updating, helping developers grasp the framework’s core mechanisms.