Vue 检查异步组件何时加载

Posted 2023-02-23

【中文标题】Vue 检查异步组件何时加载

【英文标题】：Vue check when async component has loaded

【发布时间】：2019-03-24 02:31:57

【问题描述】：

我想知道如何检查异步组件何时加载。

通常我会像这样加载我的组件：

Vue.component(
     'booking-overlay', 
     () => import('@/components/BookingOverlayAsync.vue')
);

使用这样的东西不起作用：

Vue.component(
   'booking-overlay',
    () => import('@/components/BookingOverlayAsync.vue').then(() => 
        console.log('component has loaded');
    )
);

导致如下错误：

Uncaught (in promise) TypeError: Cannot read property '__esModule' of undefined at ensureCtor..

组件不再加载，但承诺确实解决了。通过添加then，它似乎不再解决承诺本身。

如何全局注册这个异步组件并检查这个组件的 javascript 块何时加载？

显然，我可以简单地与设置全局组件一起执行此操作：

import('@/components/BookingOverlayAsync.vue').then(() => 
    console.log('Chunk loaded');
);

不过，这似乎是一个非常丑陋的解决方案。

【问题讨论】：

你能显示你要异步加载的目标vue组件的代码吗

【参考方案1】：

因为 .then 函数返回的第二个 promise 对象不会继续将异步加载的组件传递给 vue lib 本身。

Vue.component 函数期望 second 参数应该是一个返回 promise 的函数，其中解析的数据必须是异步加载的组件本身。

请尝试以下操作：

Vue.component(
        'booking-overlay',
        () => import('@/components/BookingOverlayAsync.vue').then(component => 
            console.log('component has loaded');
            return component;
        )
    );

【讨论】：

这比我想象的要明显得多。现在可以了。感谢您的帮助。