A point of VUE with an instance.

As front-end engineers, most of the things we deal with as problems at work is rendering data into our views. Over the years there have been so many iterations of the best way to do this but then came along VUE.js. Vue helps us front-end engineers and developers by providing a very easy to use API for rendering data into our view. This post is going to be part of a series or post introducing the Vue framework to absolute beginners. In this post, I will be introducing the vue instance.

What is Vue?

To sum it up, Vue is a reactive, versatile and performant front-end framework that provides an API that enables easy maintenance and testability. The makers of Vue have made it so easy that you can just drop Vue in just a tiny portion of your view hence making it very progressive. Unlike frameworks such as Ember(one of my favorites) and Angular, Vue doesn't require a hold of your whole UI just from it where you need it. It is heavily inspired by the MVVM pattern.

Getting started.

Every vue application starts with a Vue instance which is a function, which is our topic for the day. An instance of Vue looks something like:

const vm = new Vue({
    'el': '#app',
    'data': {
        message: "Hello World!"
    }
})

The Instance

The Vue instance is a function that takes an options object as an argument. This is basically the root of the vue application. The options object simply put stores data and performs actions. The options object is composed of:

• 'el': This property of the options object is helping us connect our instance to the DOM(document object model). Thus the value '#app' means that we're binding our instance to an element on the DOM with an id of app.

• data: This property is an object that may be used to pass data into the DOM. When an instance is created all the properties found in the object is added to something called the reactivity system. As I described earlier Vue is reactive, which basically means it responds to change simultaneously. The reactivity system works such that the instance's data is bound or linked to everywhere the data is referenced. When a value changes in the data object its value at all references to it on the DOM "reacts" and then update to match the change. NB: properties are only reactive when they were created with the instance, this means that when you add a new property after the instance has been created, any changes to this property will not cause a change on the dom.

• methods: In addition to the data object and its properties, instances offer a number of useful instance properties and methods. Denoted by the $ prefix, mainly to differentiate instance methods from the user-defined ones. Let's have a look at this below an example from the official Vue docs:
  

    let data = { a: 1 }
    let vm = new Vue({
      el: '#example',
      data: data
    })

    vm.$data === data // => true
    vm.$el === document.getElementById('example') // => true

    // $watch is an instance method
    vm.$watch('a', function (newValue, oldValue) {
      // This callback will be called when `vm.a` changes
    })

• lifecycle hooks: Just like any other framework, Vue also has its own process an instance goes through to complete its instantiation. From setting up data, compiling the template and mounting the instance on the DOM. It then has to update the DOM with new changes as and when it comes in. During the lifetime of an instance, thus from the start of the instantiation to mounting the instance to the DOM, Vue exposes functions by way of lifecycle hooks that allows the developer to perform certain actions based on the specific stage in the lifetime of the instance. A typical example is created, this runs after the instance has been created. Others include mounted, updated and destroyed which are descriptive of the roles or functions in the lifecycle of a Vue instance. If you've done React before these may sound familiar as component lifecycle method. It is also worthy to note that each of these methods holds context of the instance they're being called on.

Well, this is a very short intro to the VUE instance, which is the root of any vue application. In subsequent articles, I will be exploring more into each component of the instance with better examples. Also if this boosted your interest into trying Vue or learning more about it please Checkout the Vue Docs and also follow me for more of these posts if you enjoyed this.