Vue 在整個應用程式及其所有元件的就緒或已安裝事件上

Question

我想知道是否有辦法檢查是否安裝了 enitre Vue 應用程式？

我正在加載一個對話框腳本，該腳本檢查頁面上的某些連結並向它們添加一個對話框事件......但問題是當頁面加載時它運行得太早。使用 jQuery 的 .ready() 函數。但此時尚未安裝所有元件...且某些 Vue 元件連結未附加對話方塊連結事件。

我希望能夠做這樣的事情：

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

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

    if (mountedApp.ready()) {
        // now load my custom non-vue dialog script so we are sure the DOM AND the all components are mounted.
        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>