Vue中组件切换的三种方式

1.v-if切换： v-if的方式来切换视图:创建和销毁(导致组件的状态不能留存)
2.v-show切换： 显示和隐藏,没有办法操作Dom结构(会保存组件的状态)
3.动态组件切换： 可以操作DOM, 并且可以留存下数据; 切换时触发的生命周期： 激活activated 冻结 deactivated 这两个方法; 用keep-alive可保存组件的状态

代码示例:

<template>
     <div>

		<button @click="isShow='HelloWorld'"
     	:class="{active:isShow==='HelloWorld'}"
		>HelloWorld</button>
		<button @click="isShow='Hello'"
		:class="{active:isShow==='Hello'}"
		>Hello</button>
		<button @click="isShow='World'" 
		:class="{active:isShow==='World'}"
		>World</button>

		<!-- v-if的方式来切换视图:  创建和销毁，(导致组件的状态不能留存) -->
		<!-- <HelloWorld v-if="isShow==='HelloWorld'"></HelloWorld>
		<Hello v-if="isShow==='Hello'"></Hello>
		<World v-if="isShow==='World'"></World> -->

		<!-- v-show的方式切换组件：  显示和隐藏，没有办法操作DOM结构 -->
		<!-- <HelloWorld v-show="isShow==='HelloWorld'"></HelloWorld>
		<Hello v-show="isShow==='Hello'"></Hello>
		<World v-show="isShow==='World'"></World> -->


		<!-- 动态组件切换： 可以操作DOM, 并且可以留存下数据
 		-->
		<keep-alive>
  		<transition name='slide-fade'>
    			<component :is="isShow"></component>
  		</transition>
    
		</keep-alive>
     </div>
</template>


<script>
    <!-- 导入组件 -->
	import HelloWorld from './components/HelloWorld'
	import Hello from './components/Hello'
	import World from './components/World'

export default{
		data() {
  		    return {
     			isShow:'HelloWorld'
  			}
		},
        <!-- 注册组件-->
		components:{
  			HelloWorld,
 			Hello,
  			World
		}
}
</script>
<style lang="scss">
     .active{
	background:hotpink;
	color:#ccc;
	}
    .slide-fade-enter-active {
	transition: all .3s ease;
	}
     .slide-fade-leave-active {
	transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
	}
     .slide-fade-enter, .slide-fade-leave-to {
	transform: translateX(10px);
	opacity: 0;
	}  

</style>