Vue auf bereite oder installierte Ereignisse für die gesamte Anwendung und alle ihre Komponenten

Question

Ich habe mich gefragt, ob es eine Möglichkeit gibt, zu überprüfen, ob die gesamte Vue-App installiert ist?

Ich lade ein Dialogskript, das bestimmte Links auf der Seite überprüft und ihnen ein Dialogereignis hinzufügt ... aber das Problem ist, dass es zu früh ausgeführt wird, wenn die Seite geladen wird. Verwenden Sie die Funktion .ready() von jQuery. Zu diesem Zeitpunkt sind jedoch noch nicht alle Komponenten installiert ... und an einige Vue-Komponentenverknüpfungen sind keine Dialogverknüpfungsereignisse angehängt.

Ich möchte in der Lage sein, so etwas zu tun:

$( document ).ready( function () {
    const app = createApp();
    app.component( 'section-header', SectionHeader );
    // weitere Komponenten etc...

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

    if (montiertApp.ready()) {
        // Laden Sie jetzt mein benutzerdefiniertes Nicht-Vue-Dialogskript, damit wir sicher sind, dass das DOM UND alle Komponenten gemountet sind.
        let CsDialog = require( './vendor/cs-dialog.min' );
        dialog = new CsDialog();
        dialog.bindEvents();
    }
});

Answer 1

您根本不需要 jQuery。

应用程序 mounted()/onMounted() 钩子将在所有组件安装完毕后运行。

请参阅下面的操场。

应用程序挂钩在最后运行。

查看有关 Lifecycle Hooks 和 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>