アプリケーション全体とそのすべてのコンポーネントの準備完了イベントまたはインストール済みイベントの Vue

Question

Vue アプリ全体がインストールされているかどうかを確認する方法があるかどうか疑問に思ったのですが?

ページ上の特定のリンクをチェックしてダイアログ イベントを追加するダイアログ スクリプトをロードしています...しかし問題は、ページのロード時に実行が早すぎることです。 jQuery の .ready() 関数を使用します。ただし、この時点ではすべてのコンポーネントがインストールされているわけではありません...また、一部の Vue コンポーネント リンクにはダイアログ リンク イベントがアタッチされていません。

次のようなことができるようにしたいです:

$( document ).ready( function () {
    const app = createApp();
    app.component( 'セクションヘッダ', SectionHeader );
    // コンポーネントの追加など...

    const mountApp = app.mount( '#app' );

    if (mountedApp.ready()) {
        // 次に、カスタムの非 VUE ダイアログ スクリプトをロードして、DOM とすべてのコンポーネントがマウントされていることを確認します。
        let CsDialog = require( './vendor/cs-dialog.min' );
        ダイアログ = 新しい CsDialog();
        ダイアログ.バインドイベント();
    }
});

Answer 1

#jQuery はまったく必要ありません。

Application

mounted()/onMounted() すべてのコンポーネントがマウントされた後にフックが実行されます。

以下の遊び場を参照してください。

アプリケーションフックは最後に実行されます。

ライフサイクルフックとonMounted()の詳細を参照してください。

リーリー リーリー リーリー