15 -【经典面试】vue如何注册异步组件

[FE92star]

1. 工厂函数——普通函数异步组件 Vue.component('async-webpack-example', function (resolve) { // 这个特殊的require语法将会告诉 webpack // 自动将你的构建代码切割成多个包，这些包 // 会通过 Ajax 请求加载 require(['./my-async-component'], resolve) })
2. Promise异步组件 Vue.component( 'async-webpack-example', // 这个动态导入会返回一个Promise对象。 () => import('./my-async-component') )
3. 高级异步组件 const AsyncComponent = () => ({ // 需要加载的组件 (应该是一个Promise对象) component: import('./MyComponent.vue'), // 异步组件加载时使用的组件 loading: LoadingComponent, // 加载失败时使用的组件 error: ErrorComponent, // 展示加载时组件的延时时间。默认值是 200 (毫秒) delay: 200, // 如果提供了超时时间且组件加载也超时了， // 则使用加载失败时使用的组件。默认值是：Infinity timeout: 3000 })

异步组件实现的本质是二次渲染，初始化时渲染成一个注释节点，等到异步组件获取成功后，再通过forceUpdate强制重新渲染

[minjs1cn]

异步：渲染的异步，加载的时机是什么时候？

如何做到渲染和加载的都是异步的？