Vue高級用法實例教程之動態(tài)組件
動態(tài)組件我相信大部分在開發(fā)的過程中都會用到，當(dāng)我們需要在不同的組件之間進行狀態(tài)切換時，動態(tài)組件可以很好的滿足我們的需求，其中的核心是component標(biāo)簽和is屬性的使用。
基礎(chǔ)描述
// vue<div id="app">??<button @click="changeTabs('child1')">child1</button>??<button @click="changeTabs('child2')">child2</button>??<button @click="changeTabs('child3')">child3</button>??<component :is="chooseTabs">??</component></div>// jsvar child1 = {??template: '<div>content1</div>',}var child2 = {??template: '<div>content2</div>'}var child3 = {??template: '<div>content3</div>'}var vm = new Vue({??el: '#app',??components: {????child1,????child2,????child3??},??methods: {????changeTabs(tab) {??????this.chooseTabs = tab;????}??}})AST解析
<component>的解讀和前面幾篇內(nèi)容一致，會從AST解析階段說起，過程也不會專注每一個細(xì)節(jié)，而是把和以往處理方式不同的地方特別說明。針對動態(tài)組件解析的差異，集中在processComponent上，由于標(biāo)簽上is屬性的存在，它會在最終的ast樹上打上component屬性的標(biāo)志。
//? 針對動態(tài)組件的解析function processComponent (el) {??var binding;??// 拿到is屬性所對應(yīng)的值??if ((binding = getBindingAttr(el, 'is'))) {????// ast樹上多了component的屬性????el.component = binding;??}??if (getAndRemoveAttr(el, 'inline-template') != null) {????el.inlineTemplate = true;??}}render函數(shù)
有了ast樹，接下來是根據(jù)ast樹生成可執(zhí)行的render函數(shù)，由于有component屬性，render函數(shù)的產(chǎn)生過程會走genComponent分支。
// render函數(shù)生成函數(shù)var code = generate(ast, options);// generate函數(shù)的實現(xiàn)function generate (ast,options) {??var state = new CodegenState(options);??var code = ast ? genElement(ast, state) : '_c("div")';??return {????render: ("with(this){return " + code + "}"),????staticRenderFns: state.staticRenderFns??}}function genElement(el, state) {??···??var code;??// 動態(tài)組件分支??if (el.component) {????code = genComponent(el.component, el, state);??}}針對動態(tài)組件的處理邏輯其實很簡單，當(dāng)沒有內(nèi)聯(lián)模板標(biāo)志時(后面會講),拿到后續(xù)的子節(jié)點進行拼接，和普通組件唯一的區(qū)別在于，_c的第一個參數(shù)不再是一個指定的字符串，而是一個代表組件的變量。
// 針對動態(tài)組件的處理??function genComponent (????componentName,????el,????state??) {????// 擁有inlineTemplate屬性時，children為null????var children = el.inlineTemplate ? null : genChildren(el, state, true);?????????return ("_c(" + componentName + "," + (genData$2(el, state)) + ????(children ? ("," + children) : '') + ")")??}普通組件和動態(tài)組件的對比
普通組件的render函數(shù)
"with(this){return _c('div',{attrs:{"id":"app"}},[_c('child1',[_v(_s(test))])],1)}"動態(tài)組件的render函數(shù)
"with(this){return _c('div',{attrs:{"id":"app"}},[_c(chooseTabs,{tag:"component"})],1)}"簡單的總結(jié)，動態(tài)組件和普通組件的區(qū)別在于：
ast階段新增了component屬性，這是動態(tài)組件的標(biāo)志
產(chǎn)生render函數(shù)階段由于component屬性的存在，會執(zhí)行g(shù)enComponent分支，genComponent會針對動態(tài)組件的執(zhí)行函數(shù)進行特殊的處理，和普通組件不同的是，_c的第一個參數(shù)不再是不變的字符串，而是指定的組件名變量。
render到vnode階段和普通組件的流程相同，只是字符串換成了變量，并有{ tag: 'component' }的data屬性。例子中chooseTabs此時取的是child1。
工廠函數(shù)形式的動態(tài)組件
還可以使用如下工廠函數(shù)形式的動態(tài)組件:
const AsyncComponent = () => ({??// 需要加載的組件 (應(yīng)該是一個 `Promise` 對象)??component: import('./MyComponent.vue'),??// 異步組件加載時使用的組件??loading: LoadingComponent,??// 加載失敗時使用的組件??error: ErrorComponent,??// 展示加載時組件的延時時間。默認(rèn)值是 200 (毫秒)??delay: 200,??// 如果提供了超時時間且組件加載也超時了，??// 則使用加載失敗時使用的組件。默認(rèn)值是：`Infinity`??timeout: 3000});components: {??AsyncComponent,},