Analysis of Vue.js 2.0 Initialization and Rendering Logic

Vue.js is one of the most popular MVVM frameworks, known for its easy learning curve, friendly documentation, and supporting build tools. Vue 2.0, released recently, brings a 50% reduction in size, a 60% performance boost, and many API improvements over Vue 1.0.

This article is part of a series that analyzes the Vue.js 2.0 source code to explain the framework’s implementation principles. The focus of this piece is the front‑end rendering part.

Vue Initialization

The entry point for Vue in a browser environment is /src/entries/web-runtime-with-compiler.js , which is selected by the config.js configuration file.

The core initialization logic resides in /src/core/instance/index.js . When a developer writes new Vue(...) , the constructor ultimately calls the _init method defined in initMixin .

The _init method sets up the component instance, merges options, and invokes the lifecycle hooks that prepare the instance for mounting.

Rendering Logic – Render Function

After the instance is initialized, Vue proceeds to the rendering phase. The initRender method prepares the rendering context, and the $mount method is the entry point for the actual rendering process.

Vue supports three rendering modes, all of which ultimately produce a render function:

Custom render function – the developer writes the render function directly.

Template syntax – Vue parses the template string into an AST and then generates a render function.

El option – a shortcut that treats the element’s outerHTML as a template.

Regardless of the chosen mode, Vue must obtain a render function that returns a Virtual DOM tree (VNode).

VNode and Patch Method

The render function produces a VNode, Vue’s representation of the Virtual DOM. The VNode structure is defined in /src/core/vdom/vnode.js and includes fields such as tag , data , children , and text . Additional structures like VNodeData , VNodeDirective , and VNodeComponentOptions describe various aspects of a DOM node.

To turn the Virtual DOM into real DOM elements, Vue calls the patch(oldVnode, vnode, hydrating) function located in /src/core/vdom/patch.js . This function performs a DOM diff algorithm: if the old and new VNodes are identical, it reuses the existing element; otherwise, it recursively patches differences by creating, updating, or removing real DOM nodes.

Summary of the Rendering Process

Execute new Vue → run _init to initialize the instance.

Mount the instance with $mount , which generates a render function based on the chosen rendering mode.

A Watcher observes data changes; when data updates, Vue calls _update .

_update invokes vm._render() , executing the render function to produce a VNode.

The patch method diffs the new VNode against the old one and applies the necessary DOM operations to reflect the changes on the page.

Through these steps, Vue efficiently updates the view in response to data changes while keeping the developer experience simple.