How to apply methods and understand the life cycle principles of Vue 3

Principle Overview

The life cycle of Vue 3 refers to a series of events that a component goes through from creation to destruction. Some operations can be performed during these events, such as initializing data, rendering views, and loading. Asynchronous data, etc. In Vue 3, the life cycle of the component is defined through the setup() function.

Instance analysis

The life cycle of Vue 3 includes the following stages:

1. beforeCreate

Before the instance is created, that is, before initialization is called. At this time, the component instance has not been initialized, and attributes such as data, methods, and computed cannot be accessed, and some operations are performed before the component state is initialized.

export default {
  beforeCreate() {
    console.log('beforeCreate');
  }
}

2. created

is called after the instance is created, that is, after initialization. At this point, configurations such as data observation have been completed, but the DOM has not yet been mounted, and attributes such as data, methods, and computed can be accessed. You can use the created hook function to perform operations such as data initialization and event monitoring.

import { onMounted, onUnmounted } from 'vue';

export default {
  data() {
    return {
      count: 0
    };
  },
  created() {
    console.log('created');
  },
  mounted() {
    onMounted(() => {
      console.log('component mounted');
    });
  },
  unmounted() {
    onUnmounted(() => {
      console.log('component unmounted');
    });
  }
}

3. beforeMount

is called before the mount starts. At this stage, the real DOM nodes have not been rendered yet. You can use the beforeMount hook function to perform some asynchronous operations before the component is mounted, such as loading animations.

export default {
  beforeMount() {
    console.log('beforeMount');
  }
}

4. mounted

is called after the mounting is completed. At this point, the component has rendered the real DOM. The mounted hook function is often used to initialize DOM operations and populate component data after interacting with the server, such as obtaining DOM nodes through ref and registering event listeners.

export default {
  mounted() {
    console.log('mounted');
    const button = this.$refs.myButton;
    button.addEventListener('click', () => {
      this.count++;
    });
  }
}

5. beforeUpdate

is called before the data is updated. At this point, the old data state can be accessed before updating. You can use the beforeUpdate hook function to perform some operations before the component data is updated, such as dynamic binding of class and style, etc.

export default {
  beforeUpdate() {
    console.log('beforeUpdate');
  }
}

6. updated

is called after the data is updated. At this point, the component has updated the DOM and can complete DOM operations by accessing the latest data state. You can use the updated hook function to perform some operations after the component data is updated, such as triggering animation effects, etc.

export default {
  updated() {
    console.log('updated');
  }
}

7. beforeUnmount

is called before the component is uninstalled. At this point, the component instance is still fully available, but its view has been destroyed and is no longer updated. You can use the beforeUnmount hook function to perform some cleanup operations before the component is unmounted, such as canceling event listeners, timers, and asynchronous requests.

export default {
  beforeUnmount() {
    console.log('beforeUnmount');
  }
}

8. unmounted

is called after the component is unmounted. At this point, the component instance and all its associated DOM elements have been destroyed, and the component's internal data and methods can no longer be accessed. You can use the unmounted hook function to perform some final cleanup operations after the component is unmounted.

export default {
  unmounted() {
    console.log('unmounted');
  }
}

It should be noted that some life cycle functions have been removed from Vue 3, such as activated, deactivated, errorCaptured, etc., which can be implemented through the new Composition API.

The above is the detailed content of How to apply methods and understand the life cycle principles of Vue 3. For more information, please follow other related articles on the PHP Chinese website!