Vue异步组件
轉(zhuǎn)載自??Vue異步組件
在大型應(yīng)用中,我們可能需要將應(yīng)用分割成小一些的代碼塊,并且只在需要的時候才從服務(wù)器加載一個模塊。為了簡化,Vue 允許你以一個工廠函數(shù)的方式定義你的組件,這個工廠函數(shù)會異步解析你的組件定義。Vue 只有在這個組件需要被渲染的時候才會觸發(fā)該工廠函數(shù),且會把結(jié)果緩存起來供未來重渲染。例如:
Vue.component('async-example', function (resolve, reject) {setTimeout(function () {// 向 `resolve` 回調(diào)傳遞組件定義resolve({template: '<div>I am async!</div>'})}, 1000) })如你所見,這個工廠函數(shù)會收到一個?resolve?回調(diào),這個回調(diào)函數(shù)會在你從服務(wù)器得到組件定義的時候被調(diào)用。你也可以調(diào)用?reject(reason)?來表示加載失敗。這里的?setTimeout?是為了演示用的,如何獲取組件取決于你自己。一個推薦的做法是將異步組件和?webpack 的 code-splitting 功能一起配合使用:
Vue.component('async-webpack-example', function (resolve) {// 這個特殊的 `require` 語法將會告訴 webpack// 自動將你的構(gòu)建代碼切割成多個包,這些包// 會通過 Ajax 請求加載require(['./my-async-component'], resolve) })你也可以在工廠函數(shù)中返回一個?Promise,所以把 webpack 2 和 ES2015 語法加在一起,我們可以寫成這樣:
Vue.component('async-webpack-example',// 這個 `import` 函數(shù)會返回一個 `Promise` 對象。() => import('./my-async-component') )當(dāng)使用局部注冊的時候,你也可以直接提供一個返回?Promise?的函數(shù):
new Vue({// ...components: {'my-component': () => import('./my-async-component')} })如果你是一個?Browserify?用戶同時喜歡使用異步組件,很不幸這個工具的作者明確表示異步加載“并不會被 Browserify 支持”,至少官方不會。Browserify 社區(qū)已經(jīng)找到了一些變通方案,這些方案可能會對已存在的復(fù)雜應(yīng)用有幫助。對于其它的場景,我們推薦直接使用 webpack,以擁有內(nèi)建的被作為第一公民的異步支持。
處理加載狀態(tài)
2.3.0+ 新增
這里的異步組件工廠函數(shù)也可以返回一個如下格式的對象:
const AsyncComponent = () => ({// 需要加載的組件 (應(yīng)該是一個 `Promise` 對象)component: import('./MyComponent.vue'),// 異步組件加載時使用的組件loading: LoadingComponent,// 加載失敗時使用的組件error: ErrorComponent,// 展示加載時組件的延時時間。默認(rèn)值是 200 (毫秒)delay: 200,// 如果提供了超時時間且組件加載也超時了,// 則使用加載失敗時使用的組件。默認(rèn)值是:`Infinity`timeout: 3000 })注意如果你希望在?Vue Router?的路由組件中使用上述語法的話,你必須使用 Vue Router 2.4.0+ 版本。
?
總結(jié)
- 上一篇: java中的AIO
- 下一篇: 消息称 iQOO12 手机采用 1.5K