A deep dive in the Vue.js source code

This series presents an exhaustive dive in the Vue.js source code in order to illustrate fundamental JavaScript concepts. It attempts to break concepts down to a level that JavaScript beginners can understand. For additional information on the future plans and trajectory of this series, see this post. For updates on the progress of the series, follow me on twitter. For a table of all of the posts in the series, see this post.

The Vue Object Constructor Function

The Vue instance is the most logical point to dive in to the Vue.js source code. As the guide to Vue.js explains, “Every Vue application starts by creating a new Vue instance with the Vue function.”

In the Vue.js source code, new Vue instances are created using the Vue object constructor function:

function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword');
}
this._init(options);
}

An object constructor function is a blueprint for creating additional objects. Object constructor functions generally begin with a capital letter by convention:

function Vue (options) {
[. . . .]
}

You call an object constructor function with the new keyword. For example, you might call the Vue constructor function as follows:

var vm = new Vue({
// options
})

Calling an object constructor function returns a new object and sets the this keyword to the object returned.

The Vue object constructor function takes one parameter: options.

function Vue (options) {
[. . . .]
}

The Vue object constructor function tests whether the current environment is not the production environment using an if statement:

[....]
if (process.env.NODE_ENV !== 'production' &&
!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword');
}
[....]

If the current environment is the production environment, the && short circuits to false, and the rest of the expression is not evaluated.

If you are in a development environment, the object constructor function checks whether this is not an instanceof Vue.

[....]
if (process.env.NODE_ENV !== ‘production’ &&
!(this instanceof Vue)
) {
warn(‘Vue is a constructor and should be called with the `new` keyword’);
}
[....]

If you are in a development environment and this is not an instanceof Vue, then the object constructor function calls the warn function and passes a string as a parameter informing the developer that Vue should be called as a function constructor with the new keyword:

[....]
if (process.env.NODE_ENV !== ‘production’ &&
!(this instanceof Vue)
) {
warn(‘Vue is a constructor and should be called with the `new` keyword’);
}
[....]

We will look at the implementation details of thewarn function in another post. If you are paying close attention, you will notice the use of single quotes and tick quotes being passed to the warn function:

warn('Vue is a constructor and should be called with the `new` keyword');

The use of a tick quote in the middle of a single quote has the obvious benefit of preventing the quote from being ended prematurely.

Finally, the Vue function constructor calls the method this._init and passes any options passed as parameters during the object constructor function call:

function Vue (options) {
[....]
this._init(options);
}

But wait a second. Where is the ._init method defined on the this
 object? As we have seen, it is not defined within the object constructor function call. A quick search of the source code reveals that the ._init method is added to Vue.prototype within a separate function named initMixin

We will take a look at initMixin next time. If you like the series and want to motivate me to keep working through it, clap, follow, respond, or share to your heart’s content.

Next Post: