【前端进阶】VUE高性能组件引用
前言
在vue开发中，使用v-if这种判断来渲染和销毁组件的方式是非常常用的，在最初的工作时，我单个页面要根据不同条件引用不同组件的时候我时长用v-if、v-else-if 这样来判断和使用。
效果是这样：
<TabA v-if="flag=='A'"></TabA> <TabB v-else-if="flag=='B'"></TabB> <TabC v-else-if="flag=='C'"></TabC> <TabD v-else-if="flag=='D'"></TabD> <TabE v-else-if="flag=='E'"></TabE> <TabF v-else-if="flag=='F'"></TabF>
当初就是觉得这样判断简单也实用。大家都是知道的v-if符合条件的就渲染，不符合条件的不渲染。我一直觉得用这个判断方法就该这样用。但在长期的工作后，会发现但大量组件需要判断和销毁的时候这种方式其实并不好，而且组件多了代码还很多还不利于阅读。之后自己也开始思考，是否有更好更高效的方法了？
巧用自定义标签变组件
我们在vue中其实我们可以给变量设置标签名字来变成一个标签的
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<component v-bind:is="component">111111</component>
</div>
<script>
new Vue({
el:"#app",
data:{
component:"div"
}
})
</script>
</body>
</html>
有了这一部想想后面我们能干什么呢！ 对了，就是把我们引用的组件，通过这个变量来生成对应组件，这样你一个标签就可以代替你很多判断，并且代码看上去更简洁。
下面上干货
<template>
<component v-bind:is="component"></component>
</template>
<script>
import Entry from './entry' ;
import Picture from './imglist' ;
import File from './filelist' ;
import Web from './web';
import Style from './style' ;
import Mapping from './mapping' ;
import Detail from './detail' ;
import Power from './power' ;
export default {
components:{
Entry,
Picture,
File,
Web,
Style,
Mapping,
Detail,
Power
},
data(){
return {
title:"功能菜单",
component:'Entry'
} ;
},
mounted(){
this.component = "Entry" ;
},
methods:{
}
} ;
在这里组件还是原样引用进来，在components中注册好，但是通过component 这个变量赋值来指定你需要使用对应的组件，是不是这样更简单，更利于阅读呢！
总结
通过变量引入组件这个方法，让我觉得不仅代码更精炼了，而且有效的做到了页面是页面，逻辑是逻辑，让业务逻辑和页面区分开才不会把整个页面弄的乱，也便于阅读。
在减少了v-if的多个判断后页面的性能也会提升。
