详解详解Vue中组件的缓存中组件的缓存
主要介绍了Vue中组件的缓存，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习
价值，需要的朋友们下面随着小编来一起学习学习吧
之前在《Vue一个案例引发的动态组件与全局事件绑定总结》这篇文章中简单提到过组件的缓存。当时只是简单的提供了一个
解决问题的思路，并没有说到多少组件缓存的东西，今天我们就来详细说说组件的缓存。
组件化开发模式下，我们会把整个项目拆分成很多组件，然后按照合理的方式组织起来。
自然就存在组件之间的切换问题，Vue 中有个「动态组件」的概念，它能够让我们更好的实现组件的切换。
在实际的项目开发中，产品是不可能放过我们的，需求总是在不停的变化，如果你碰到那些不改需求的产品就嫁了吧，太难得
了。
最近项目中需要实现一个保留上一次Tab 页的功能。如下图，当我选择 B 组件时，我希望从首页切换到设置页时，还会停留
在 B 组件，而不是重新渲染为默认的 A 组件。
首先我们可以使用内置组件 <component>实现动态组件的效果。
<template>
<div>
<button
v-for="tab in tabs"
:key="tab"
@click="currentTab = tab"
></button>
<component :is="currentTab"></component>
</div>
</template>
<script>
export default {
name: "Tab",
data() {
return {
currentTab: "A",
tabs: ['A','B']
};
}
};
</script>
这时，我们做到了两个组件之间的切换，但动态组件在切换的过程中，组件的实例都是「重新创建」的，而我们需要保留组件
状态。
为了解决这个问题，你还需要使用 vue 内置组件 <keep-alive>。
keep-alive
keep-alive 包裹「动态组件」时，会缓存不活动的组件实例，而不是销毁它们。它是一个抽象的组件，它自身不会渲染成一个
DOM 元素，也不会出现在父组件链中。
值得注意的是 「动态组件」这四个字，它只有在包含动态组件时，才会产生效果。如果不是动态组件则会无效。比如下面这
种用法是没有效果的。
<keep-alive>
<my-component></my-component>
</keep-alive>
既然如此，我们来看看 keep-alive 常用的几种方式：
方案一： 使用内置组件 <component>。
<keep-alive>
<component :is="view"></component>
</keep-alive>
方案二： 当出现条件判断时的子组件
<keep-alive>
<comp-a v-if="a > 1"></comp-a>
<comp-b v-else></comp-b>
</keep-alive>
weixin_38611527
- 粉丝: 7
- 资源: 904
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- ARM Cortex-A(armV7)编程手册V4.0.pdf
- ABB机器人保养总结解析.ppt
- 【超详细图解】菜鸡如何理解双向链表的python代码实现
- 常用网络命令的使用 ipconfig ping ARP FTP Netstat Route Tftp Tracert Telnet nslookup
- 基于单片机控制的DC-DC变换电路
- RS-232接口电路的ESD保护.pdf
- linux下用time(NULL)函数和localtime()获取当前时间的方法
- Openstack用户使用手册.docx
- KUKA KR 30 hA,KR 60 hA机器人产品手册.pdf
- Java programming with JNI
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0