Vue watch监听 、动态组件、keep-alive组件

1.watch监听

watch可以监听（data\computer等）数据值的变化

  watch:{
    "要监听的属性名":{
      immediate:true,//立即执行
      deep:true, //深度监听复杂类型内变化
      handler (newVal,oldVal){

      }
    }
  }

watch  既可以监听基本数据类型也可以监听引用数据类型

当监听对象、数组数据时就需要深度监听   需加上 deep:true

2、动态组件

这个标签就相当于一个占位符，需要使用is属性指定绑定的组件

<component :is="comName"></component>
<!-- comName是变量，值为需要的用的组件名 -->

3、keep-alive组件

缓存动态组件

<keep-alive include="name1,name2">
      <!-- component Vue内置组件，可动态显示组件 -->
      <component :is="comName"></component>
</keep-alive>
    <!-- include="组件名1,组件名2,组件名3, ..."  -->
    <!-- :include="['组件名1','组件名2']"  -->

3.1、keep-alive的生命周期

该生命周期，只有在组件使用了keep-alive时才能使用
deactivated当组件被缓存时，自动触发
actived当组件被激活时，自动触发

//当组件第一次被创建时，会先触发created,后触发activated
//当组件被激活时，只会触发activated，不触发created
activated() {
	console.log('组件被激活了，activated')
},
deactivated(){
	console.log('组件被缓存了，deactivated')
}

4、动态组件例子

<button @click="comName = 'left'">展示left</button>
<button @click="comName = 'right'">展示right</button>

<div class="box">
    <!-- component组件是Vue内置的 -->
	<!-- 渲染left组件和right组件 -->
	<!-- is表示要渲染的组件的名字 -->
	<component :is="comName"></component>
</div>
<script>
	import left from '@/compeonents/left.vue'
	import right from '@/components/right.vue'

	export default {
		components: {
			left,
			right
		},
		data() {
			return {
				comName: left,
                //comName 表示要展示的组件的名字
			}
		}
	}
</script>