vue3异步组件

vue2

// 定义一个异步组件
const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 Promise)
  component: import('./MyComponent.vue'),
  // 加载中应当渲染的组件
  loading: LoadingComponent,
  // 出错时渲染的组件
  error: ErrorComponent,
  // 渲染 loading 组件前的等待时间。默认值是 200ms。
  delay: 200,
  // 最长等待时间。超出此时间则渲染 error 组件。默认值是 Infinity。
  timeout: 3000
});

new Vue({
  el: '#app',
  components: {
    'async-component': AsyncComponent
  }
});

　　vue3

import { defineAsyncComponent } from 'vue';

// 定义一个异步组件
const AsyncComponent = defineAsyncComponent({
  // 需要加载的组件 (应该是一个 Promise)
  loader: () => import('./MyComponent.vue'),
  // 加载中应当渲染的组件
  loadingComponent: LoadingComponent,
  // 出错时渲染的组件
  errorComponent: ErrorComponent,
  // 渲染 loading 组件前的等待时间。默认值是 200ms。
  delay: 200,
  // 最长等待时间。超出此时间则渲染 error 组件。默认值是 Infinity。
  timeout: 3000,
  // 自定义的重试行为
  onError(error, retry, fail, attempts) {
    if (attempts <= 3) {
      // 重试 3 次
      retry();
    } else {
      // 失败
      fail();
    }
  }
});

const app = createApp({
  components: {
    'async-component': AsyncComponent
  }
});

app.mount('#app');

　　<Teleport  to="css选择器   body">  button 点击打得开蒙层  </Teleport>
虚拟dom元素  实际渲染dom位置