Vue中 key keep-alive的实现原理
更新时间：2018年09月18日 09:09:01 作者：麋鹿传
这篇文章主要介绍了Vue中 key keep-alive的实现原理,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗
keep-aliv是Vue.js的一个内置组件。它能够不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。
它有两个生命周期：
- activated: keep-alive组件激活时调用
- deactivated: keep-alive组件停用时调用
它提供了include与exclude两个属性，允许组件有条件地进行缓存。
keep-alive key
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="app">
<keep-alive>
<child-component key="1" v-if="seen" name="1"></child-component>
<child-component key="2" v-if="!seen" name="2"></child-component>
</keep-alive>
<button @click="toggle">toggle</button>
</div>
<script type="text/javascript">
Vue.component('child-component', {
template: `<input type="text" placeholder="enter">`,
data() {
return {}
},
props: ["name"],
mounted() {
console.log(`${this.name} mounted`)
}
})
const vm = new Vue({
el: "#app",
data: {
seen: true
},
methods: {
toggle() {
this.seen = !this.seen;
}
}
})
</script>
</body>
</html>
key是标识元素不再被复用，注意key是Vue中的一个保留的属性，不能作为prop传递给子组件，否则会在控制台看到Vue的报错
但是keep-alive标识不重复创建组件实例，也就是只会触发一次created mounted事件，
利用两者可以对组件的复用进行比较精细的管理
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
解决echarts echarts数据动态更新和dataZoom被重置问题
这篇文章主要介绍了解决echarts echarts数据动态更新和dataZoom被重置问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue项目中禁用浏览器缓存配置案例,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了vue如何使用AIlabel标注组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家详细介绍了vue项目实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
这篇文章主要给大家介绍了关于VUE3 Vite打包后动态图片资源不显示问题的解决方法,可能是因为在部署后的服务器环境中对中文文件名的支持不完善,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了vant组件中 dialog的确认按钮的回调事件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了浅谈Vue使用Cascader级联选择器数据回显中的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要为大家详细介绍了如何使用vue实现视频全屏切换的功能,文中的示例代码讲解详细, 具有一定的借鉴价值,有需要的小伙伴可以参考一下2023-11-11
下面小编就为大家分享一篇vue2.0 路由不显示router-view的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
vue提供了声明式编写UI的方式,即vue提供了对DOM进行描述的方式,有两种描述DOM的方式即模板和render 函数,本文通过示例代码介绍vue2 中使用 render 函数编写组件的方式,感兴趣的朋友跟随小编一起看看吧2024-06-06
最新评论