Vue中处理组件切换的三种方式

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=&#