vue3 で onLoad を使用する方法 (コード例)

Vue 3 のリリースに伴い、開発者はスキルと知識を再統合する必要もあります。 Vue 2 では、onLoad はフック関数の 1 つで、コンポーネントの初期化時にロジック コードを実行するために使用されます。ただし、Vue 3ではonLoadフック機能が廃止されました。では、Vue 3 で onLoad を使用するにはどうすればよいでしょうか?

まず、Vue 3 の新しいコンポジション API を理解する必要があります。 Comboposition API は、より柔軟な関数メソッドを提供するだけでなく、より明確な論理構造も提供します。

Vue 3 には、beforeMount と Mounted という 2 つのフックが用意されています。 beforeMount はコンポーネントがレンダリングされる前に実行されますが、mount はコンポーネントがレンダリングされた後に実行されます。したがって、Vue 2 のロジック コードを 2 つの部分に分割し、onLoad で最初に実行されたコードを beforeMount フックに置き、mount で最初に実行されたコードをマウントされたフックに置くことができます。

サンプル コードは次のとおりです:

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

Composition API を介して新しく追加されたオブジェクトのセットアップは、コンポーネントがインスタンス化される前に実行されることに注意してください。セットアップ中にフックを取り付けます。

要約すると、onLoad は Vue 3 で廃止されましたが、Composition API を通じて提供される beforeMount フックとマウントされたフックは適切な代替品となり、より明確で使いやすくなります。以上、Vue 3 での onLoad の使い方を紹介しました。お役に立てれば幸いです。

以上がvue3 で onLoad を使用する方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。