Comment utiliser onLoad dans vue3 (exemple de code)

Avec le lancement de Vue 3, les développeurs doivent également réintégrer leurs compétences et leurs connaissances. Dans Vue 2, onLoad est l'une des fonctions de hook, utilisée pour exécuter du code logique lorsque le composant est initialisé. Cependant, dans Vue 3, la fonction hook onLoad a été supprimée. Alors, comment utiliser onLoad dans Vue 3 ?

Tout d'abord, nous devons comprendre la nouvelle API Composition dans Vue 3. L'API Composition fournit non seulement une méthode de fonction plus flexible, mais également une structure logique plus claire.

Vue 3 propose deux crochets : avant montage et monté. beforeMount est exécuté avant le rendu du composant, tandis que Mounted est exécuté après le rendu du composant. Par conséquent, nous pouvons diviser le code logique dans Vue 2 en deux parties, mettre le code initialement exécuté dans onLoad dans le hook beforeMount et mettre le code initialement exécuté dans Mounted dans le hook monté.

L'exemple de code est le suivant :

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

Il convient de noter que la configuration des objets ajoutés via l'API Composition est exécutée avant l'instanciation du composant, nous devons donc mettre le beforeMount et les hooks montés dans la configuration.

Pour résumer, bien que onLoad ait été aboli dans Vue 3, les hooks beforeMount et montés fournis via l'API Composition peuvent être un bon remplacement et sont plus clairs et plus pratiques à utiliser. Ce qui précède est une introduction à l'utilisation de onLoad dans Vue 3. J'espère que cela pourra vous être utile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!