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