Vue pada acara sedia atau dipasang untuk keseluruhan aplikasi dan semua komponennya

Question

Saya tertanya-tanya sama ada terdapat cara untuk menyemak sama ada seluruh apl Vue dipasang?

Saya sedang memuatkan skrip dialog yang menyemak pautan tertentu pada halaman dan menambahkan acara dialog padanya... tetapi masalahnya ialah ia berjalan terlalu awal apabila halaman dimuatkan. Gunakan fungsi .ready() jQuery. Tetapi tidak semua komponen dipasang pada ketika ini... dan beberapa pautan komponen Vue tidak mempunyai peristiwa pautan dialog yang dilampirkan.

Saya mahu dapat melakukan sesuatu seperti ini:

$( document ).ready( function () {
    const app = createApp();
    app.component( 'section-header', SectionHeader );
    // lebih banyak komponen dan lain-lain...

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

    if (mountedApp.ready()) {
        // sekarang muatkan skrip dialog bukan vue tersuai saya supaya kami pasti DOM DAN semua komponen dipasang.
        biarkan CsDialog = memerlukan( './vendor/cs-dialog.min' );
        dialog = new CsDialog();
        dialog.bindEvents();
    }
});

Answer 1

Anda tidak memerlukan jQuery sama sekali.

Aplikasi mounted()/onMounted() Cangkuk akan berjalan selepas semua komponen dipasang.

Lihat taman permainan di bawah.

Kait aplikasi berjalan di hujung.

Lihat maklumat tentang Kait Kitar Hidup dan 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>