How to use onLoad in vue3 (code example)

With the launch of Vue 3, developers also need to reintegrate their skills and knowledge. In Vue 2, onLoad is one of the hook functions, which is used to execute some logic code when the component is initialized. However, in Vue 3, the onLoad hook function has been abolished. So, how to use onLoad in Vue 3?

First of all, we need to understand the new Composition API in Vue 3. The Composition API not only provides a more flexible function method, but also a clearer logical structure.

Vue 3 provides two hooks: beforeMount and mounted. beforeMount is executed before the component is rendered, while mounted is executed after the component is rendered. Therefore, we can divide the logic code in Vue 2 into two parts, put the code originally executed in onLoad in the beforeMount hook, and put the code originally executed in mounted in the mounted hook.

The sample code is as follows:

import { onMounted, onBeforeMount } from 'vue';
export default {
  setup() {
    onBeforeMount(() => {
      // 在组件渲染之前执行
      console.log('组件准备渲染');
    });
    onMounted(() => {
      // 在组件渲染完成后执行
      console.log('组件已经渲染完毕');
    });
  },
};

It should be noted that the newly added object setup through the Composition API is executed before the component is instantiated. Therefore, we need to put the beforeMount and mounted hooks into During setup.

To sum up, although onLoad has been abolished in Vue 3, the beforeMount and mounted hooks provided through the Composition API can be a good replacement and are clearer and more convenient to use. The above is an introduction to the usage of onLoad in Vue 3. I hope it can be helpful to you.

The above is the detailed content of How to use onLoad in vue3 (code example). For more information, please follow other related articles on the PHP Chinese website!