源自:https://cn.vuejs.org/v2/guide/index.html
動(dòng)態(tài)組件
<!-- 失活的組件將會(huì)被緩存!--> (keep-alive)
<keep-alive>
????????????<component v-bind:is="currentTabComponent"></component>
</keep-alive>
異步組件
Vue 只有在這個(gè)組件需要被渲染的時(shí)候才會(huì)觸發(fā)該工廠函數(shù),且會(huì)把結(jié)果緩存起來(lái)供未來(lái)重渲染。
new Vue({
? // ...
? components: {
? ? 'my-component': () => import('./my-async-component')
? }
})
處理加載狀態(tài)
const AsyncComponent = ()=> ({
????????? // 需要加載的組件 (應(yīng)該是一個(gè) `Promise` 對(duì)象)
?????????component: import('./MyComponent.vue'),
????????? // 異步組件加載時(shí)使用的組件??
????????loading: LoadingComponent,
????????? // 加載失敗時(shí)使用的組件??
????????error: ErrorComponent,
? ????????// 展示加載時(shí)組件的延時(shí)時(shí)間。默認(rèn)值是 200 (毫秒)??
????????delay: 200,
? ????????// 如果提供了超時(shí)時(shí)間且組件加載也超時(shí)了讶泰,? // 則使用加載失敗時(shí)使用的組件作媚。默認(rèn)值是:`Infinity`??
????????timeout: 3000
})
注意:
$refs?只會(huì)在組件渲染完成之后生效炼蛤,并且它們不是響應(yīng)式的猿挚。這僅作為一個(gè)用于直接操作子組件的“逃生艙”——你應(yīng)該避免在模板或計(jì)算屬性中訪問(wèn)?$refs咐旧。