Vue3动态注册组件和Vue2动态注册组件的区别

Vue3动态注册组件和Vue2动态注册组件的区别

今天再写一个小Demo的时候，碰到了一个有意思的问题，Vue2中动态注册组件的写法放在Vue3上竟然行不通，而且诡异的事情是单独在Ts文件里面导入Vue并进行注册还行不通，必须在入口函数进行注册

Vue2中的写法

components.forEach(key => {
    Vue.component(key, () => import(`@/custom-component/${key}/Component`))
    Vue.component(key + 'Attr', () => import(`@/custom-component/${key}/Attr`))
})

Vue3中的写法

components.forEach((item) => {
  app.component( item, () => import(`@/custom-component/${item}/Component.vue`) );
  app.component(
    item + "Attr",
    () => import(`@/custom-component/${item}/Attr.vue`)
  );
});

是不是看上去跟没问题似的~，那么问题就来了。

在我调用组件的时候，页面加载进来不是我全局注册的组件报了undefined的警告

这就让我开始纳闷了，这是为什么呢？Vue3中路由懒加载的写法也这样，按道理应该也没错。

那么问题就在这，固化了思想，想当然了。

人家版本迭代更新了那么多好用的API，在一些该优化的地方怎么可能还顽固。

看了源码才知道。Vue2中里面那样定义在component这个API里面就调用了AsyncComponent这个API