Lifecycle hooks

The first way that comes to mind to restore our note content into the Vue instance is to set the content data property when the instance is created.

Each Vue instance follows a precise lifecycle with several steps--it will be created, mounted on the page, updated, and finally, destroyed. For example, during the creating step, Vue will make the instance data reactive.

Hooks are a specific set of functions that are automatically called at some point in time. They allow us to customize the logic of the framework. For example, we can call a method when a Vue instance is created.

We have multiple hooks at our disposal to execute logic when, or just before, each of these steps occurs:

• beforeCreate: This is called when the Vue instance object is created (for example, with new Vue({})), but before Vue has done anything with it.
• created: This is called after the instance is ready and fully operating. Note that, at this point, the instance is not in the DOM yet.
• beforeMount: This is called just before the instance is added (or mounted) on the web page.
• mounted: This is called when the instance is on the page and visible in the DOM.
• beforeUpdate: This is called when the instance needs to be updated (generally, when a data or computed property has changed).
• updated: This is called after the data changes are applied to the template. Note that the DOM may not be up to date yet.
• beforeDestroy: This is called just before the instance is torn down.
• destroyed: This is called when the instance is fully removed.

For now, we will only use the created hook to restore the note content. To add a lifecycle hook, just add a function with the corresponding name into the Vue instance options:

new Vue({
  // ...

  // This will be called when the instance is ready
  created () {
    // Set the content to the stored value
    // or to a default string if nothing was saved
    this.content = localStorage.getItem('content') || 'You can write in **markdown**'
  },
})

Now, when you refresh the app, the ;created hook will be automatically called when the instance is created. This will set the content data property value to the result of the restoration or to 'You can write in **markdown**' if the result was falsy, in case we didn't have anything saved before.

In JavaScript, a value is falsy when equal to false, 0, an empty string, null, undefined, or NaN (not a number). Here, the localStorage.getItem() function will return null if the corresponding key doesn't exist in the browser local storage data.

The watcher we set up is also called, so the note is saved, and you should see something similar to this in the browser console:

new note: You can write in **markdown** old note: This is a note
saving note: You can write in **markdown**
The saving operation was completed!

We can see that when the created hook is called, Vue has already set the data properties and their initial values (here, This is a note).