Vue中keep-alive用法

什么是keep-alive?

在平常开发中，有部分组件没有必要多次初始化，这时，我们需要将组件进行持久化，使组件的状态维持不变，在下一次展示时，也不会进行重新初始化组件。
也就是说，kee-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染 。也就是所谓的组件缓存

使用场景

举个例子：移动端H5项目，订单列表页面，有分页，当我们滑动的时候，就会加载相应的数据，当我们前往了订单详情页面，再从订单详情返回订单列表，这时产品需要让我们前端的小伙伴做到在返回后，需要保持上次加载的数据以及滑动的位置，这个时候就会有聪明的同学说keep-alive，没错，就是它，很棒的。。。

常用知识点

注意：被keep-alive包含的组件不会被再次初始化，也就意味着缓存的组件不会再次被mounted,为此提供activated和deactivated两个生命周期的钩子。

activated 当 keep-alive 包含的组件再次渲染的时候触发
deactivated 当 keep-alive 包含的组件销毁的时候触发

属性理解

include包含的组件(可以为字符串，数组，以及正则表达式,只有匹配的组件会被缓存)
exclude排除的组件(以为字符串，数组，以及正则表达式,任何匹配的组件都不会被缓存)
max缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)

注：

当使用正则表达式或者数组时，一定要使用v-bind

如果同时使用include,exclude,那么exclude优先于include

代码示例：

// 所有路径匹配到的视图组件都会被缓存！
<keep-alive><router-view></router-view>
</keep-alive>// 只缓存组件name为aa或者bb的组件
<keep-alive include="aa,bb"> <component />
</keep-alive>// 组件name为cc的组件不缓存
<keep-alive exclude="cc"> <component />
</keep-alive>// 如果同时使用include,exclude,那么exclude优先于include， 下面的例子只缓存aa组件
<keep-alive include="aa,bb" exclude="bb"> <component />
</keep-alive>// 如果缓存的组件超过了max设定的值3，那么将删除第一个缓存的组件
<keep-alive exclude="c" max="3"> <component />
</keep-alive>

结合router使用

使用 `meta` 属性

// routes 配置
export default [{path: '/',name: 'home',component: Home,meta: {keepAlive: true // 需要被缓存}},{path: '/aa',name: 'aa',component: Aa,meta: {keepAlive: false // 不需要被缓存}},{path: '/bb',name: 'bb',component: Bb,//不写meta即不需要被缓存}
]

<keep-alive><router-view v-if="$route.meta.keepAlive"><!-- 这里是会被缓存的视图组件，比如 Home！ --></router-view>
</keep-alive><router-view v-if="!$route.meta.keepAlive"><!-- 这里是不会被缓存的视图组件，比如 Aa,Bb！ -->
</router-view>

注意的坑点

1.keep-alive 先匹配被包含组件的 name 字段，如果 name 不可用，则匹配当前组件 components 配置中的注册名称。
2.keep-alive 不会在函数式组件中正常工作，因为它们没有缓存实例。
3.当匹配条件同时在 include 与 exclude 存在时，以 exclude 优先级最高(当前vue 2.4.2 version)。比如：包含于排除同时匹配到了组件Bb，那组件Bb不会被缓存。
4.包含在 keep-alive 中，但符合 exclude ，不会调用activated和 deactivated。

Vue中keep-alive用法相关推荐

vue中directives的用法
Vue中directives的用法关于 vue 中 directives 的用法问题,详细可以参考vue官方对directives的解释当前文章主要讲述directives怎么用,directiv ...
vue中定时器一般用法，定时器函数传参以及清除定时器
一.vue中定时器一般用法(举个例子) 显示当前时间, setInterval()方法会每秒执行一次函数,类似手表功能: <template><div class="use ...
vue中watch的用法
在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model=&quo ...
vue中this.init用法_Vue中的this.$options.data()和this.$data用法说明
问题项目里遇到一个问题,用this.$options.data()重置组件data时,data()里用this获取的props或method都为undefined,代码简化如下: export de ...
vue中props的用法
vue使用props的用法日常编程中都会用到父组件用子组件.子用父的情况,下面先介绍一种子传父的情况 1.在父组件中 (1).首先是在其定义一个list属性以存储其数据值 (2).定义一个绑定属性& ...
vue中@oninput的用法
.vue文件其实是一个组件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件.需求是这页面中,改变input的值,就调用一个事件,第一想到的是oninput. oninput 事件在用 ...
vue中$root的用法
vue中$root是用来访问根组件的,用法: this.$root.根组件属性代码: main.js: new Vue({data(){return{isUpdate:true //根组件属性}}, ...
vue 中provide的用法_聊聊Vue中provide/inject的应用详解
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
Vue中 $ref 的用法
ref 被用来给DOM元素或子组件注册引用信息.引用信息会根据父组件的 $refs 对象进行注册.如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例注意:只要想 ...
vue中$bus的用法及$emit、$on、$off的使用
vue中 $bus 一般与 $emit. $on. $off 连用,一般用在任意组件间的通信,即 $bus 用来传递非父子关系的数据. 如两个组件之间传递数据: 子组件1 this.$bus.$emi ...

Vue中keep-alive用法

什么是keep-alive?

使用场景

常用知识点

属性理解

代码示例：

结合router使用

使用 `meta` 属性

注意的坑点

Vue中keep-alive用法相关推荐

最新文章

热门文章

Vue中keep-alive用法

什么是keep-alive?

使用场景

常用知识点

属性理解

代码示例：

结合router使用

使用 meta 属性

注意的坑点

Vue中keep-alive用法相关推荐

最新文章

热门文章

使用 `meta` 属性