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>