1.动态组件<component>可以实现动态组件的切换显示隐藏，但会销毁原组价，进入销毁阶段；<keep-alive>在切换时可以保持原组件不被销毁，被暂时缓存，再切换回原组件，不用在加载，可以提高性能。
2.<component>必须配合is属性使用，is的值就是引入需要加载的组件。<keep-alive>的使用非常简单，直接用<keep-alive>包裹<component>即可实现效果。
demo代码：
<!--<keep-alive>包裹<component>实现缓存切换，如果不使用<keep-alive>切换会将原组件销毁-->
<keep-alive><component :is="component"></component></keep-alive>
//引入组件
import Left from 'Left.vue';
import Right from 'Right.vue';
data(){
return {
component:'Left', //将组件名给一个变量，is的值为这个变量，当变量变化，实现切换
}
},
methods:{
tab(){ //实现tab切换的方法
this.component=Right;
}
},
components:{
Left,
Right
}
3.针对keep-alive还有两个生命周期钩子函数：
activated()，在动态组件被激活（切换后呈现的组件）时触发；
deactivated()，当动态组件被缓存（切换后，不是这个组件）时触发；
4.被keep-alive包裹<component>后，默认是引入的将所有的组件都包裹。如果存在不需要缓存的组件的需求（keep-alive缓存组件会占据内存）。可以使用keep-alive的include属性指定需要缓存的组件，其它组件就不会缓存；使用exclude属性指定不需要缓存的组件，其它组件就会缓存。但是include和exclude，不能同时使用，只能使用其中的一个。如：
<!--加入引入了Left和Right两个组件。
include指定了"Left"缓存，那么Right就不会被缓存，当从Right切换到Left时，会销毁Right组件-->
<keep-alive include="Left"><component :is="component"></component></keep-alive>5.当然，通过import引入组件的方式，引入注册使用三步骤比较麻烦。我们还可以在写组件时，在组件的export default中定义一个name属性，它的值就是组件名称。如果is写了组件的某一name属性的值，那么通过import引入注册的就不能使用，使用name的方式优先于import引入再注册的方式。
export default {
name: "Left", //定义组件名称
data() {
return {}
}
}我们在使用<component>就可以在不通过import引入再注册的方式，直接给is赋值Left.vue中的name值。
在实际开发中，通过在组件内部定义name属性，一般就是给<component>这样的情况使用的；而通过import引入的组件一般都是用在标签实例化上面。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/66312.html
