Vue混写Minxin、虚拟Dom/ref、动态组件、缓存keep

minxin是混合的意思，把共性的部分用minxin，都调用它，如果混入后从新定义混入的方法，二者功能全部实现。mixins只能用export暴漏，不能用export default暴漏

虚拟Dom

<div ref="wwg"></div>

var obj = this.$refs.wwg;
obj.style.backgorundColor = 'red';

动态组件
]
v-once
该指令后面不需要跟任何表达式
该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。
未使用v-once指令之前，对数据进行修改，界面同步更
在动态自定义组件模板template里面使用v-once，加载到内存，切换不在重新渲染,提高切换速度

	<div id="root">
		<component :is='type'></component>
		<button @click="BtnClick">按钮</button>
	</div>

<script>
	Vue.component('one',{
		template:'<h1 v-once>组件一</h1>'
	})
	Vue.component('two'{
		template:'<h2 v-once>组件二</h2>'
	})
	var vm = new Vue({
		el:'#root',
		data:{
			type:'one'
		},
		methods:{
			BtnClick:function(){
				this.type = (this.type === 'one' ? 'two':'one');
			}
		}
	})
</script>

vue中keep-alive缓存标签，通常和component标签结合使用，对动态加载的组件进行缓存

//要缓存的组件include,一个
	<keep-alive include = "组件名">
		<router-view></router-view>
	</keep-alive>
//多个组件,用数组
	<keep-alive :include = "['Home','Login']">
		<router-view></router-view>
	</keep-alive>

//不要缓存的组件exclude
	<keep-alive :exclude= "组件名">
		<router-view></router-view>
	</keep-alive>

缓存的生命周期写在组件里面

 activated(){
 	//激活组件执行
 },
 deactivated(){
 	//失活组件执行
 }