需求：有些組件需要的temp模板是根據(jù)父組件傳進來不同的參數(shù)渲染不同的temp模板棍辕，和不同的data。此時異步組件就可以用到了
使用前，須知：
vue有兩種形式的代碼 compiler（模板）模式和runtime模式（運行時），vue模塊的package.json的main字段默認為runtime模式捐晶， 指向了"dist/vue.runtime.common.js"位置
vue中runtimecompiler和runtimeonly的區(qū)別
開發(fā)中，你依然使用template妄辩，就需要選擇runtimecompiler
開發(fā)中惑灵，使用的是.vue文件夾開發(fā)，那么可以選擇runtimeonly
runtimecompiler
Vue中的模板如何最終渲染成真實DOM
template -> ast -> render -> vdom -> UI
runtimeonly
Vue中的模板如何最終渲染成真實DOM
render -> vdom -> UI
Vue默認走runtimecompiler形式.runtime-only比runtime-compiler更快眼耀，因為它省略了vue內(nèi)部過程中的第一個過程英支，如果是runtime-compiler那么main.js中就會出現(xiàn)template從而需要過程一導致增加了一個過程，同時增加了大小而 runtime-only 模式中不是沒有寫 template 畔塔，只是把 template 放在了.vue 的文件中了并有一個叫 vue-template-compiler的在開發(fā)依賴時將.vue文件中的 template 解析成 render 函數(shù)了因為是開發(fā)依賴潭辈，不在最后生產(chǎn)中鸯屿，所以最后生產(chǎn)出來的運行的代碼沒有template
如果需要用到extends或者異步組件提前劃定不同temp就需要用到runtimeCompiler模式
解決方法在vue.config中增加個配置就可以了
runtimeCompiler: true
異步組件使用示例：
<template>
<div>
異步
<async-demo v-if="isShow"/>
</div>
</template>
<script>
import Vue from 'vue';
export default {
data(){
return{
isShow:false,
}
},
mounted(){
//此處先編輯號模板
const Demo=Vue.component('async-demo',function(resolve,reject){
resolve({
template:`<div>{{name}}</div>`,
data(){
return {
name:'測試'
}
},
})
})
// 當為真時渲染異步組件
this.isShow=true;
}
}
</script>
<style>
</style>
渲染后:
