Notes on Vue instance and lifecycle hooks

vue-instance.md

Vue Essentials: Vue instance and lifecycle hooks

Vue notes from official documentation Reference: Official Docs

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

The Vue Instance

Creating a Vue Instance

Every Vue application starts by creating a new Vue instance with the Vue function:

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

Data and Methods

When a Vue instance is created, it add all the properties found in it data object to Vue's reactivity system. When the values of those properties change, the view will "react", updating to match the new values (much similar to state in React).

var data = { a: 1 };

var vm = new Vue({
  data: data
});

vm.a; // 1

data.a = 12;
vm.a; //12

When this data changes, the view will re-render. It should be noted that properties in data are only reactive if they existed when the instance was created. That means if you add a new property, like:

vm.b = 'hi';

Then changes to b will not trigger any view updates. If you know you'll need a property later, you'll need to set some initial value. For example:

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

The only exception to this being the use of Object.freeze(), which prevents existing properties from being changed, which also means the reactivity system can't track changes.

var obj = {
  foo: 'bar'
};

Object.freeze(obj);

// any changes on "obj" trigger NOTHING!
new Vue({
  el: '#app',
  data: obj
});

In addition to data properties, Vue instances expose a number of useful instance properties and methods. These are prefixed with $ to differentiate them from user-defined properties. E.g:

var data = {
  a: 1
};

var vm = new Vue({
  el: '#example',
  data: data
});

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

Full list of instance properties and methods.

Instance Lifecycle Hooks

Each Vue instance goes through a series of initialization steps when it's created - for example, it needs to

• set up data observation
• compile the template
• mount the instance to the DOM
• and update the DOM when data changes.

Along the way, it also runs functions called lifecycle hooks, giving users the opportunity to add their own code at specific stages.

new Vue({
  data: {
    a: 1
  },
  /* Hooks on Creating */
  beforeCreate: function() {},
  // created hook, used to run code after the instance is created
  created: function() {
    console.log('Im created!');
  },
  /* Hooks on Mounting */
  beforeMount: function() {},
  mounted: function() {},
  /* Hooks on Updating */
  beforeUpdate: function() {},
  updated: function() {},
  /* Hooks on Destroying */
  beforeDestroy: function() {},
  destroyed: function() {}
});

IMPORTAN NOTES:

• All lifecyle hooks are called with their this context pointing to the Vue instance invoking it.

• Don't use arrow function on an options property or callback, such as created: () => console.log(this.a) or vm.$watch('a', newValue => this.myMethod()). Since an arrow function doesn't have a this, this will be treated as any other variable and lexically looked up through parent scopes until found, often resulting in errors such as Uncaught TypeError: Cannot read property of undefined or Uncaught TypeError: this.myMethod is not a function.

Lifecycle Diagram