脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue中的keep-alive

vue keep-alive的简单总结

 更新时间：2021年01月25日 09:05:29   作者：guo&qi  
这篇文章主要介绍了vue中的keep-alive的相关资料，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下

一、作用

　　主要用于保留组件状态或避免重新渲染。

二、用法

　　<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

　　<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

　　当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

三、Props

include

　　include - 字符串或正则表达式。只有名称匹配的组件会被缓存。

exclude

　　exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

　　include 和 exclude prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
 <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
 <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
 <component :is="view"></component>
</keep-alive>

　　匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

max

　　max - 数字。最多可以缓存多少组件实例。

　　一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

<keep-alive :max="10">
 <component :is="view"></component>
</keep-alive>

以上就是浅析vue中的keep-alive的详细内容，更多关于vue中的keep-alive的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • vue中js判断长时间不操作界面自动退出登录(推荐)

    vue中js判断长时间不操作界面自动退出登录(推荐)

    这篇文章主要介绍了vue中js判断长时间不操作界面自动退出登录,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-01-01
  • vue项目页面嵌入代码块vue-prism-editor的实现

    vue项目页面嵌入代码块vue-prism-editor的实现

    这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-10-10
  • Vue脚手架学习之项目创建方式

    Vue脚手架学习之项目创建方式

    这篇文章主要给大家介绍了关于Vue脚手架学习之项目创建方式的相关资料，文中通过介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 栽Vue3中传递路由参数的三种方式

    栽Vue3中传递路由参数的三种方式

    vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转,传参方式可划分为 params 传参和 query 传参,本文将给大家介绍如何通过不同方式在 Vue 3 中传递路由参数,需要的朋友可以参考下
    2024-07-07
  • 解决Vue @submit 提交后不刷新页面问题

    解决Vue @submit 提交后不刷新页面问题

    这篇文章主要介绍了解决Vue @submit 提交后不刷新页面问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue 仿百度搜索功能实现代码

    Vue 仿百度搜索功能实现代码

    本文通过实例代码给大家介绍了vue仿百度搜索功能，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
    2017-02-02
  • 了解VUE的render函数的使用

    了解VUE的render函数的使用

    本篇文章主要介绍了了解VUE的render函数的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • Vue自动生成组件示例总结

    Vue自动生成组件示例总结

    在Vue中,我们可以使用unplugin-generate-component-name插件自动基于目录名称生成组件名称,这个插件使得在大型代码库中找到和管理组件更加容易和直观,这篇文章主要介绍了Vue自动生成组件示例总结,需要的朋友可以参考下
    2023-12-12
  • vue3+vite实现在线预览pdf功能

    vue3+vite实现在线预览pdf功能

    这篇文章主要为大家详细介绍了如何通过vue3和vite实现在线预览pdf功能,文中的示例代码简洁易懂,具有一定的借鉴价值,感兴趣的小伙伴可以学习一下
    2023-10-10
  • vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决

    vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决

    这篇文章主要介绍了vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决方案，本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
    2020-09-09

最新评论