详解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>
方案三: 结合路由使用时
<keep-alive> <router-view></router-view> </keep-alive>
以上三种方式组件都会被缓存。另外一点需要注意的是,<keep-alive> 只能用在只有一个子组件的情况。如果你在其中有 v-for 则不会产生效果。
明白了如何使用 <keep-alive> 时,想要保留我们的 Tab 页,我们只需这么做即可。
<keep-alive> <router-view></router-view> </keep-alive>
但是这里你会发现,我们把每一个组件都缓存了起来,不仅案例中的「设置页」被缓存连「首页」也一起被缓存了起来,这不是我们想要的。
vue 帮我们也考虑到了这一点,所以我们可以选择性的进行组件的缓存,也就是说你想让谁缓存,就让谁缓存,非常的自由与可配置。
原因是因为 <keep-alive> 提供了两个属性 include 与 exclude。
- include:只有名称匹配的组件会被缓存。
- exclude:任何名称匹配的组件都不会被缓存。
二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。
<keep-alive include="a,b"></keep-alive> <keep-alive :include="/a|b/"></keep-alive> <keep-alive :include="['a', 'b']"></keep-alive>
所以,结合 <keep-alive> 的 include 或 exclude属性,我们就可以轻易的选择需要缓存的组件。
<keep-alive include="system"> <router-view></router-view> </keep-alive>
这样我们就可以只缓存「设置页」,然后实现保留上次选择的 Tab 页。
以上所述是小编给大家介绍的Vue中组件的缓存详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
下一篇:Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解