Introduction

There are 13 of Vue’s lifecycle hooks according to the latest Official Vue documentation. Every Vue instance that created will go through lifecycle hooks. Here are the Vue’s lifecycle hooks will explain in this article:

• beforeCreate and created
• beforeMount and mounted
• beforeUpdate and updated
• beforeUnmount and unmounted

_destroyed__ and _beforeDestroy_ lifecycle hooks (in Vue.js 3.0.0+) are deprecated._

Another 5 of Vue’s lifecycles hooks are explained in Part 2which included activated, deactivated, errorCaptured, renderTracked, and renderTriggered**.**

beforeCreate and created

Vue declares and knows data properties in these two phases. We can fetch the data from the server-side in the created hook before render the Vue component. The difference between is thebeforeCreated hook is before an instance has been fully initialized whereas the created hook is after an instance is created.

beforeCreate and created

Output in the browser

beforeMount and mounted

beforeMounthook is starting to compile and render the HTML template. Vue creates a template based on our HTML code combine with the data properties and uses this template to create the real HTML code which then is rendered as the DOM in themounted hook.

beforeMount and mounted

Output in the browser

#vue #javascript #programming #developer