Open FE92star opened 3 years ago
Vue.component('async-webpack-example', function (resolve) { // 这个特殊的
语法将会告诉 webpack // 自动将你的构建代码切割成多个包,这些包 // 会通过 Ajax 请求加载 require(['./my-async-component'], resolve) })
Vue.component( 'async-webpack-example', // 这个动态导入会返回一个
对象。 () => import('./my-async-component') )
const AsyncComponent = () => ({ // 需要加载的组件 (应该是一个
对象) component: import('./MyComponent.vue'), // 异步组件加载时使用的组件 loading: LoadingComponent, // 加载失败时使用的组件 error: ErrorComponent, // 展示加载时组件的延时时间。默认值是 200 (毫秒) delay: 200, // 如果提供了超时时间且组件加载也超时了, // 则使用加载失败时使用的组件。默认值是:
timeout: 3000 })
异步组件实现的本质是二次渲染,初始化时渲染成一个注释节点,等到异步组件获取成功后,再通过forceUpdate强制重新渲染
异步:渲染的异步,加载的时机是什么时候?
如何做到渲染和加载的都是异步的?
Vue.component('async-webpack-example', function (resolve) { // 这个特殊的
require语法将会告诉 webpack // 自动将你的构建代码切割成多个包,这些包 // 会通过 Ajax 请求加载 require(['./my-async-component'], resolve) })
Vue.component( 'async-webpack-example', // 这个动态导入会返回一个
Promise对象。 () => import('./my-async-component') )
const AsyncComponent = () => ({ // 需要加载的组件 (应该是一个
Promise对象) component: import('./MyComponent.vue'), // 异步组件加载时使用的组件 loading: LoadingComponent, // 加载失败时使用的组件 error: ErrorComponent, // 展示加载时组件的延时时间。默认值是 200 (毫秒) delay: 200, // 如果提供了超时时间且组件加载也超时了, // 则使用加载失败时使用的组件。默认值是:
Infinitytimeout: 3000 })
异步组件实现的本质是二次渲染,初始化时渲染成一个注释节点,等到异步组件获取成功后,再通过forceUpdate强制重新渲染