How to use Vue Lifecycle Hooks (Part 2)

How to use Vue Lifecycle Hooks (Part 2)

Let explore Vue’s lifecycle hooks which include activated, deactivated, errorCaptured, renderTracked, and renderTriggered in this article. Vue 3 just release recently and updated some cool features for an example renderTracked and renderTriggered lifecycle hooks.

Introduction

Let explore Vue’s lifecycle hooks which include activated, deactivated, errorCaptured, renderTracked, and renderTriggered in this article. Vue 3 just release recently and updated some cool features for an example renderTracked and renderTriggered lifecycle hooks. The other lifecycle hooks are explained here.

activated and deactivated

activated and deactivated lifecycle hooks will be invoked accordingly when a component is wrapped by a dynamic component — keep-alive. This dynamic component is useful if want to preserve/maintain the previous state's when switching the tab or navigate to another page.

  • activated hook shows that the dynamic component *e.g. Home component *is active on the web page.
  • The deactivated hook is called when load another dynamic component and the dynamic component e.g. Home component is not active. However, their state is not changing when the dynamic component is not active.

Demo Scenario : Tab Component created and wrapped with the keep-alive.

 <script>
    const app = Vue.createApp({
      data() {
        return {
          selectedComponent: "tab-home",
        };
      },
    });

    app.component("tab-home", {
      template: `<div class="demo-tab">Home component</div>`,
      activated() {
        console.log("tab-home activated");
      },
      deactivated() {
        console.log("tab-home deactivated");
      },
    });
    app.component("tab-info", {
      template: `<div><br>
        <input v-model="name" placeholder="Name" />
        <p>My Name is: {{ name }}</p>
        </div>`,
      data() {
        return {
          name: "",
        };
      },
      activated() {
        console.log("tab-info activated");
      },
      deactivated() {
        console.log("tab-info deactivated");
      },
    });
    app.component("tab-about", {
      template: `<div class="demo-tab">Archive component</div>`,
      activated() {
        console.log("tab-about activated");
      },
      deactivated() {
        console.log("tab-about deactivated");
      },
    });

    app.mount("#dynamic-component-demo");
  </script>

activated and deactivated hooks (JavaScript Code)

Image for post

activated and deactivated for each component

errorCaptured

errorCaptured only triggered by any descendent component is captured. There is another function for the global error handler which is errorHandler. But this function does not capture event handler error. It will capture during component render function and watchers. For more information, you may read from here.

The errorCaptured hook receives 3 parameters:

  • an *error *that displays messages.
  • a *component *that will output a proxy object.
  • *info *that will tell you what kind of error is e.g. render function or native event handler.

vue javascript web-development programming developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Vue.js Web App Development | Skenix Infotech

Our expert Vue.js developers follows Agile methodology that delivers high-quality & affordable Vue.js services. Hire Vue.js Developer from Skenix Infotech.

Useful Tools In Vue.js Web Development

Useful Tools In Vue.js Web Development. There are some tools that developers that are just getting started with Vue or sometimes, have experience building with Vue sometimes do not know exist to make development in Vue a lot easier.

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Learn VUE 3 by Making a Web App ~ Composition API, Vue JS Hooks?

Learn how the new Vue JS 3 works by making a simple and easy web application to increment and decrement a numerical value using the Composition API, including Vue Ref, Vue Reactive and Vue Computed.