多读书还是有好处，前段时间，用vue做了一个动态切换tab的项目，如果初学者的做法就是用路由进行跳转，但是今天闲来没事看教程和书发现还有一种做法，就是用component的is,即多个组件可以使用同一个挂载点，根据条件来切换不同的组件。

component标签中的is属性决定了当前采用子组件，is-bind的缩写：":is"   绑定父组件中data的其中一个属性，具体代码如下

<div id="app">
    <ul>
        <li @click="currentView='home'">home</li>
        <li @click="currentView='list'">list</li>
        <li @click="currentView='detail'">detail</li>
    </ul>
    <component :is="curentView"></component>
</div>

var vue = new Vue({
    el:'#app',
    data:{
        currentView:'home',
    },
    components:{
        home:{ //home对应的是currentView的值
            template:'<div>home</div>'
        },
        list:{//list对应的是currentView的值
            template:'<div>list</div>'
        }
        detail:{//detail对应的是currentView的值
            template:'<div>detail</div>'
        }
    }

});

 解释：

component标签中的is属性决定了当前采用的是那个组件，我们初始化的时候默认其中的一个template的名字，ul起到顶部导航的作用，点击即可修改currentView的值，也就修改了conponent标签中使用的子组件类型，需要注意的事项是，currentView的值需要和父组件实例中的conponents属性的key相对应

 

进阶：keep-alive

vue.js  2.0 中的keep-alive属性被修改为标签，

<keep-alive>
     <component :is="curentView"></component>
</keep-alive>

或者
<component :is="curentView" keep-alive></component>

优点：component标签接受keep-alive属性，可以将切换出去的组件保留在内存中，避免重新渲染，节省时间大概1S左右

下面我们对上面的例子进行改造升级(只修改conponents中的home部分，其他的同理)

 components:{
        home:{ //home对应的是currentView的值
            template:'<div>\
                <p>home</p>\
                <ul>\
                    <li v-for=( item , index ) in items>{{ item }}</li>
                </ul>\
            </div>'
        },
       
    },
data:function(){
    return {
        items:[],
    }
},
ready:function(){
    console.log('test');
    this.items=['1','2','3','4']
}

在keep-alive属性下，可以在home和list之间来回切换currentView，home组件中的ready函数只会运行一次，可以看到控制台无论点击多少次都是会只显示"test",但是将keep-alive去掉后再重新操作，你会发现每一次点击home都会出现“test"

总结：

我们可以根据keep-alive适当的进行页面的性能优化，如果每个组件在激活时并不需要请求，每次都是实时请求数据，那就使用keep-alive可以避免一些不必要的重复渲染，导致用户看到停留时间过程的空白页面，反之，如果每次激活组件都需要向后端请求数据的话，改方法就不适合了

高阶：activate钩子函数

vue.js提供了activate钩子函数，作用用于动态组件切换或者静态组件初始化的过程，activate接受一个回调函数做为参数，使用函数后组件才进行之后的渲染过程，对此我们将上面的例子再次进行升级改造

 components:{
        home:{ //home对应的是currentView的值
            template:'<div>\
                <p>home</p>\
                <ul>\
                    <li v-for=( item , index ) in items>{{ item }}</li>
                </ul>\
            </div>'
        },
       
    },
data:function(){
    return {
        items:[],
    }
},
activate：function(done){
    var that = this;
    //该处延迟用于模拟真实业务中的ajax异步数据请求
    setTimeout(function(){
        that.items= ['1' , '2' , '3' , '4']
        done();
    },1000)
}

纯手打，有错误之处，还请见谅，谢谢,

如果大家有需要vue全套视频的，我可以免费提供，现在网上全套的那种视频大部分都是收费的，不收费也是那种断断续续或者轻易都能理解的，希望节省大家时间，帮助到大家。如需课程下方评论，我会联系你