[Vue3] Lifecycle

In this posting, we will learn about the lifecycle of Vue.

If you learn about the lifecycle, it can be helpful in development.

Create a Project

Let's create a project to test the lifecycle.

2021.06.02 - [Web/JavaScript] - [Vue3] Getting Started with Vue3 + TypeScript + TailwindCSS

Create a Lifecycle Component

Exchange the HelloWorld component to Lifecycle component.

 

components/Lifecycle.vue

<template>
  <div class="my-4 border">
    <h1>Lifecycle</h1>
    <div class="flex justify-center">
      <h2>{{ count }}</h2>
      <button @click="plus" class="ml-2 font-bold">+</button>
      <button @click="minus" class="ml-2 font-bold">−</button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Lifecycle",
  data: function () {
    return {
      count: 0,
    };
  },
  methods: {
    plus: function () {
      this.count++;
    },
    minus: function () {
      this.count--;
    },
  },
  beforeCreate: function () {
    console.log("1> beforeCreate");
  },
  created: function () {
    console.log("1> created");
  },
  beforeMount: function () {
    console.log("1> beforeMount");
  },
  mounted: function () {
    console.log("1> mounted");
  },
  beforeUpdate: function () {
    console.log("1> beforeUpdate");
  },
  updated: function () {
    console.log("1> updated");
  },
  beforeUnmount: function () {
    console.log("1> beforeUnmount");
  },
  unmounted: function () {
    console.log("1> unmounted");
  },
});
</script>

beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, and unmounted are the lifecycle methods.

I put count variable and plus and minus functions to change the rendering.

 

Now, we will use this component.

 

App.vue

<template>
  <div class="flex justify-center">
    <img alt="Vue logo" src="./assets/logo.png" />
  </div>
  <Lifecycle v-if="flag == true" />
  <button @click="toggle">Toggle</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Lifecycle from "./components/Lifecycle.vue";

export default defineComponent({
  name: "App",
  components: {
    Lifecycle,
  },
  data: function () {
    return {
      flag: false,
    };
  },
  methods: {
    toggle: function () {
      console.log("########## Toggle ##########");
      this.flag = !this.flag;
    },
  },
});
</script>

In addition, it has a toggle button to create and destroy the component.

Test It!

Press the Toggle button!

Then, the Lifecycle component will be created.

Let's look at the console window.

We can figure out the sequence to create a component.

Next, press the plus or minus button.

These lifecycle methods are called.

Finally, press the Toggle button again to destroy a component.

Multiple Components

Let's add a new component copying from Lifecycle.

I modified it as each 1 and 2.

 

App.vue

<template>
  ...
  <Lifecycle1 v-if="flag == true" />
  <Lifecycle2 v-else />
  <button @click="toggle">Toggle</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Lifecycle1 from "./components/Lifecycle1.vue";
import Lifecycle2 from "./components/Lifecycle2.vue";

export default defineComponent({
  name: "App",
  components: {
    Lifecycle1,
    Lifecycle2,
  },
  ...
});
</script>

Use the two components.

Press the Toggle button and look at the console window.

We can also figure out the multiple component case.

Conclusion

Let's keep in mind this lifecycle sequence of Vue.