// Tutorial //

Understanding Vue.js Component Instancing

Published on January 19, 2017
Default avatar
By Joshua Bemenderfer
Developer and author at DigitalOcean.
Understanding Vue.js Component Instancing

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

If you have used Vue.js for any amount of time, or even read over the Hello World examples, you’ve probably wondered why on earth properties like “data” need to be functions, or why everything is declared in separate blocks, but mounted to the component at runtime. Well, here’s your explanation.

Core Concepts

It turns out there is a very clear set of reasons for all of this. For one thing, Vue components are largely static! Yep! A component declaration, including its methods, property definitions, and computed properties, are shared between all instances of that component in the app. When Vue needs to run methods against a specific instance of a component, it apply()*s them to get the the proper object as *this.

Reason: Saving Memory

Many frameworks, such as Angular 2 or, (at times) React, make each instance of a component a separate object. Angular 2 [citation needed] being the extreme case where every component is an instance of a class. This means that everything each component needs is initialized for every component. Normally though, you really only need to keep a component’s data separate for each initialization. Methods and such stay the same.

Vue avoids that pitfall by having data be a function that returns an object. That allows separate components to have separate internal state without needing to fully re-instantiate the entire component. Methods, computed property definitions, and lifecycle hooks are created and stored only once, and run against every instance of a component.

Reason: Static Components

Vue 2 fully embraces the idea of fast, lightweight static components. These have no internal state or data, and are generally rendered once or only on external state changes. This allows such functional components to be incredibly fast.

To take advantage of such features, you can use v-once in your templates to render a property only once, or declare your component to be functional with functional: true in the component definition.

Potential Confusion

It is often noticed by people new to Vue that while you declare your component state in data, computed properties in computed, methods in methods, they are all accessed on this.thing instead of this.type.thing (eg. this.myMethod() instead of this.methods.myMethod().)

This, again, is because your component definition really is just a definition. The actual component your methods run in is different. Vue needs those computed, methods, props, and data definitions to be able to know how to assemble the component, but for convenience it maps them to the root of the component instead of those properties.

As a side note, you can actually access this.$data.prop, this.$methods.method(), at runtime, but this is not recommended.

Hopefully this article helps clear the matter up for you. :)

If you’ve enjoyed this tutorial and our broader community, consider checking out our DigitalOcean products which can also help you achieve your development goals.

Learn more here

About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!