Vue.js Lifecycle Hooks

Introduction

When a Vue.js file is displayed to us in the browser, some events have already taken place when we visit the URL. These events are what we call hooks.

In this section, we are going to talk about the following:

• Lifecycle hooks
• Computed properties
• Watchers
• Methods

Lifecycle hooks

When a Vue instance is rendered, the application passes through several stages. In layman’s terms, lifecycle hooks are the events happening behind-the-scenes when our component renders. The stages occur when a page is mounted and when we move away from that page. They are invisible to our eyes, but they guide us when we build our pages.

Below is a diagram showing the lifecycle hooks when a Vue instance is generated. Once you have a basic understanding of each part, you will rest assured that you can structure a Vue.js file.