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

导读:本篇文章讲解 Vue混写Minxin、虚拟Dom/ref、动态组件、缓存keep,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

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(){
 	//失活组件执行
 }

在这里插入图片描述
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/4875.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!