Deep dive into the life cycle of Vue.js and TypeScript

Vue.js is a progressive JavaScript framework for building user interfaces. TypeScript is an open source language developed by Microsoft. It is a superset of JavaScript and can be compiled into pure JavaScript. The combination of Vue and TypeScript makes developing large applications easier and more efficient. This article will explore the application of TypeScript in Vue.js components in detail, especially its life cycle hook function, and provide you with a practical guide through rich examples.

Vue.js life cycle hooks

Each Vue component instance goes through a series of initialization steps - such as creating data observers, compiling templates, mounting the instance to the DOM, re-rendering the DOM when the data is updated, etc. During these processes, Vue provides life cycle hooks that allow us to add our own code at different stages.

Lifecycle hook list

The following are the main lifecycle hooks of Vue components:

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

Vue components using TypeScript

In TypeScript, Vue components usually use class-style components, which are implemented through vue-class-component libraries or Vue3's <script setup> syntactic sugar.

Setup items

Make sure you have a Vue project using TypeScript. One can be initialized via the Vue CLI.

vue create my-project
# 选择TypeScript

Class component life cycle

Using the vue-class-component library, lifecycle hooks are like class methods.

<script lang="ts">
import {
   
    
     Vue, Component } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
   
    
    
  // beforeCreate
  beforeCreate() {
   
    
    
    console.log('Component is about to be created...');
  }

  // created
  created() {
   
    
    
    console.log('Component created');