Vue sur les événements prêts ou installés pour l'ensemble de l'application et tous ses composants

Question

Je me demandais s'il existe un moyen de vérifier si l'application Vue entière est installée ?

Je charge un script de dialogue qui vérifie certains liens sur la page et leur ajoute un événement de dialogue... mais le problème est qu'il s'exécute trop tôt lors du chargement de la page. Utilisez la fonction .ready() de jQuery. Mais tous les composants ne sont pas installés à ce stade... et certains liens de composants Vue ne sont pas associés à des événements de lien de dialogue.

Je souhaite pouvoir faire quelque chose comme ceci :

$( document ).ready( function() {
    const app = créerApp();
    app.component( 'section-header', SectionHeader );
    // plus de composants etc...

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

    si (MountApp.ready()) {
        // charge maintenant mon script de dialogue personnalisé non-vue afin que nous soyons sûrs que le DOM ET tous les composants sont montés.
        let CsDialog = require( './vendor/cs-dialog.min' );
        dialogue = nouveau CsDialog();
        dialogue.bindEvents();
    }
});

Answer 1

Vous n’avez pas du tout besoin de jQuery.

Application mounted()/onMounted() Le hook s'exécutera une fois que tous les composants auront été installés.

Voir aire de jeux ci-dessous.

Les hooks d'application s'exécutent à la fin.

Consultez les informations sur les Lifecycle Hooks et onMounted()

const { createApp, onMounted } = Vue
 
const Comp = {
  props: ['num'],
  setup(props) {
    onMounted(() => { console.log(`Comp[${props.num}]: onMounted(): from setup()`)} );
  },
  mounted() {
    console.log(`Comp[${this.num}]:  mounted(): from Options API`)
  }
} 
 
const App = {
  components: {
    Comp
  },
  setup() {
    onMounted(() => { console.log("onMounted(): from setup()")} );
  },
  mounted() {
    console.log("mounted(): from Options API")
  }
}

const app = createApp(App)
app.mount('#app')

#app { line-height: 1.75; }
[v-cloak] { display: none; }

<div id="app" v-cloak>
<comp v-for="n in 100" :key="n" :num="n"></comp>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>