JS每日一题:vue中keepalive怎么理解？

fsmStudy 发布于2019-08-23 15:12 / 3037人阅读

摘要：问中怎么理解说在前面是源码中实现的一个组件感兴趣的可以研究源码什么是我们平时开发中总有部分组件没有必要多次我们需要将组件进行持久化，使组件状态维持不变，在下一次展示时，也不会进行重新音译过来就是保持活着所以在中我们可以使用来进行组件缓存基

20190212问

vue中keepalive怎么理解？

说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的可以研究源码 https://github.com/vuejs/vue/...

什么是keepalive

我们平时开发中, 总有部分组件没有必要多次init, 我们需要将组件进行持久化，使组件状态维持不变，在下一次展示时，也不会进行重新init

keepalive音译过来就是保持活着, 所以在vue中我们可以使用keepalive来进行组件缓存

基本使用

// 被keepalive包含的组件会被进行缓存

上面提到被keepalive包含的组件不会被再次init，也就意味着不会重走生命周期函数, 但是平常工作中很多业务场景是希望我们缓存的组件在再次渲染的能做一些事情,vue为keepalive提供了两个额外的hook

activated 当keepalive包含的组件再次渲染的时候触发

deactivated 当keepalive包含的组件销毁的时候触发

注: 2.1.0 版本后keepalive包含但被exclude排除的组件不会有以上两个hook

参数

keepalive可以接收3个属性做为参数进行匹配对应的组件进行缓存

include 包含的组件

exclude 排除的组件

max 缓存组件的最大值

其中include,exclude可以为字符，数组，以及正则表达式
max 类型为字符或者数字

代码理解

// 只缓存组件name为a或者b的组件
 
  


// 组件名为c的组件不缓存
 
  


// 如果同时使用include,exclude,那么exclude优先于include， 下面的例子也就是只缓存a组件
 
  


// 如果缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件

配合router使用


// 意思就是$router.meta.keepAlive值为真是将组件进行缓存

    



//router配置
new Router({
    routes: [
        {
            name: "a",
            path: "/a",
            component: A,
            meta: {
                keepAlive: true
            }
        },
        {
            name: "b",
            path: "/b",
            component: B
        }
    ]
})

总结

keepalive是一个抽象组件，缓存vnode，缓存的组件不会被mounted，为此提供activated 和 deactivated 钩子函数, 使用props max 可以控制缓存组件个数

关于JS每日一题

JS每日一题可以看成是一个语音答题社区
每天利用碎片时间采用60秒内的语音形式来完成当天的考题
群主在次日0点推送当天的参考答案

注绝不仅限于完成当天任务，更多是查漏补缺，学习群内其它同学优秀的答题思路

点击加入答题

云服务器 GPU云服务器 vue中调用js js事件监听怎么理解 vue中 java中orm理解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101675.html

JS每日一题: Vue中mixin怎么理解？

摘要：两个对象键名冲突时，取组件对象的键值对也使用同样的策略进行合并。代码理解全局混合也可以全局注册混合对象。注意使用一旦使用全局混合对象，将会影响到所有之后创建的实例为自定义的选项注入一个处理器。 20190122 Vue中mixin怎么理解？ mixin是为了让可复用的功能灵活的混入到当前组件中，混合的对象可以包含任意组件选项（生命周期，指令之类等等）, mixin翻译过来叫混合,高级的...

jubincn 2019-08-23 15:28 评论0 收藏0
JS每日一题: 请简述一下vuex实现原理

摘要：给的实例注入一个的属性，这也就是为什么我们在的组件中可以通过访问到的各种数据和状态源码位置，是怎么实现的源码位置是对的的初始化，它接受个参数，为当前实例，为的，为执行的回调函数，为当前模块的路径。 20190221 请简述一下vuex实现原理对vuex基础概念有不懂的可以点这里 vuex实现原理我们简单过一遍源码地址 https://github.com/vuejs/vuex 首...

JohnLui 2019-08-23 15:25 评论0 收藏0
JS每日一题：什么情况下适合使合vuex？Vuex使用中有几个步骤？

摘要：什么情况下适合使合使用中有几个步骤开始之前先简单了解一下定义是一个状态管理机制采用集中式存储应用所有组件的状态嗯，就是一句话能说明白的，没明白的，我们用代码再理解一下什么叫集中式式存储比如下面这段代码，同时需要用到，那么我们首先能想到就是在 20190121 什么情况下适合使合vuex？Vuex使用中有几个步骤？开始之前先简单了解一下vuex 定义: vuex是一个状态管理机制,采用...

wow_worktile 2019-08-23 15:22 评论0 收藏0
JS每日一题：简述一下Vue.js的template编译过程？

摘要：问简述一下的编译过程先上一张图大致看一下整个流程从上图中我们可以看到是从后开始进行中整体逻辑分为三个部分解析器将模板字符串转换成优化器对进行静态节点标记，主要用来做虚拟的渲染优化代码生成器使用生成函数代码字符串开始前先解释一下抽象 20190215问简述一下Vue.js的template编译过程？先上一张图大致看一下整个流程showImg(https://image-static....

NicolasHe 2019-08-23 15:16 评论0 收藏0
JS每日一题:Vue中的diff算法？

摘要：，文本节点的比较，需要修改，则会调用。，新节点没有子节点，老节点有子节点，直接删除老节点。所以一句话，的作用主要是为了高效的更新虚拟。 20190125 Vue中的diff算法？概念: diff算法是一种优化手段，将前后两个模块进行差异对比，修补(更新)差异的过程叫做patch(打补丁) 为什么vue,react这些框架中都会有diff算法呢? 我们都知道渲染真实dom的开销是很大的...

Caicloud 2019-08-23 15:32 评论0 收藏0