精华内容
下载资源
问答
  • keep原型
    千次阅读
    2021-04-09 17:19:05

    一、前言

    本文介绍的内容包括:

    • keep-alive用法:动态组件&vue-router
    • keep-alive源码解析
    • keep-alive组件及其包裹组件的钩子
    • keep-alive组件及其包裹组件的渲染

    二、keep-alive介绍与应用

    2.1 keep-alive是什么

    keep-alive是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中;使用keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。

    一个场景

    用户在某个列表页面选择筛选条件过滤出一份数据列表,由列表页面进入数据详情页面,再返回该列表页面,我们希望:列表页面可以保留用户的筛选(或选中)状态。
    keep-alive就是用来解决这种场景。当然keep-alive不仅仅是能够保存页面/组件的状态这么简单,它还可以避免组件反复创建和渲染,有效提升系统性能。总的来说,keep-alive用于保存组件的渲染状态。

    keep-alive用法

    • 在动态组件中的应用
    <keep-alive :include="whiteList" :exclude="blackList" :max="amount">
         <component :is="currentComponent"></component>
    </keep-alive>
    
    • 在vue-router中的应用
    <keep-alive :include="whiteList" :exclude="blackList" :max="amount">
        <router-view></router-view>
    </keep-alive>
    

    include定义缓存白名单,keep-alive会缓存命中的组件;exclude定义缓存黑名单,被命中的组件将不会被缓存;max定义缓存组件上限,超出上限使用LRU的策略置换缓存数据。

    内存管理的一种页面置换算法,对于在内存中但又不用的数据块(内存块)叫做LRU,操作系统会根据哪些数据属于LRU而将其移出内存而腾出空间来加载另外的数据。

    三、源码剖析

    keep-alive.js内部还定义了一些工具函数,我们按住不动,先看它对外暴露的对象

    // src/core/components/keep-alive.js
    export default {
      name: 'keep-alive',
      abstract: true, // 判断当前组件虚拟dom是否渲染成真实dom的关键
      props: {
          include: patternTypes, // 缓存白名单
          exclude: patternTypes, // 缓存黑名单
          max: [String, Number] // 缓存的组件
      },
      created() {
         this.cache = Object.create(null) // 缓存虚拟dom
         this.keys = [] // 缓存的虚拟dom的键集合
      },
      destroyed() {
        for (const key in this.cache) {
           // 删除所有的缓存
           pruneCacheEntry(this.cache, key, this.keys)
        }
      },
     mounted() {
       // 实时监听黑白名单的变动
       this.$watch('include', val => {
           pruneCache(this, name => matched(val, name))
       })
       this.$watch('exclude', val => {
           pruneCache(this, name => !matches(val, name))
       })
     },
    
     render() {
        // 先省略...
     }
    }
    

    可以看出,与我们定义组件的过程一样,先是设置组件名为keep-alive,其次定义了一个abstract属性,值为true。这个属性在vue的官方教程并未提及,却至关重要,后面的渲染过程会用到。props属性定义了keep-alive组件支持的全部参数。

    keep-alive在它生命周期内定义了三个钩子函数:

    • created
      初始化两个对象分别缓存VNode(虚拟DOM)和VNode对应的键集合
    • destroyed
      删除this.cache中缓存的VNode实例。我们留意到,这不是简单地将this.cache置为null,而是遍历调用pruneCacheEntry函数删除。
    // src/core/components/keep-alive.js
    function pruneCacheEntry (
      cache: VNodeCache,
      key: string,
      keys: Array<string>,
      current?: VNode
    ) {
     const cached = cache[key]
     if (cached && (!current || cached.tag !== current.tag)) {
        cached.componentInstance.$destroyed() // 执行组件的destroy钩子函数
     }
     cache[key] = null
     remove(keys, key)
    }
    
    

    删除缓存的VNode还要对应组件实例的destory钩子函数

    • mounted
      在mounted这个钩子中对include和exclude参数进行监听,然后实时地更新(删除)this.cache对象数据。pruneCache函数的核心也是去调用pruneCacheEntry
    function pruneCache (keepAliveInstance: any, filter: Function) {
      const { cache, keys, _vnode } = keepAliveInstance
      for (const key in cache) {
        const cachedNode: ?VNode = cache[key]
        if (cachedNode) {
          const name: ?string = getComponentName(cachedNode.componentOptions)
          if (name && !filter(name)) {
            pruneCacheEntry(cache, key, keys, _vnode)
          }
        }
      }
    }
    
    • render
    render () {
      const slot = this.$slots.defalut
      const vnode: VNode = getFirstComponentChild(slot) // 找到第一个子组件对象
      const componentOptions : ?VNodeComponentOptions = vnode && vnode.componentOptions
      if (componentOptions) { // 存在组件参数
        // check pattern
        const name: ?string = getComponentName(componentOptions) // 组件名
        const { include, exclude } = this
        if (// 条件匹配
          // not included
          (include && (!name || !matches(include, name)))||
          // excluded
            (exclude && name && matches(exclude, name))
        ) {
            return vnode
        }
        
        const { cache, keys } = this
        // 定义组件的缓存key
        const key: ?string = vnode.key === null ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '') : vnode.key
         if (cache[key]) { // 已经缓存过该组件
            vnode.componentInstance = cache[key].componentInstance
            remove(keys, key)
            keys.push(key) // 调整key排序
         } else {
            cache[key] = vnode //缓存组件对象
            keys.push(key)
            if (this.max && keys.length > parseInt(this.max)) {
              //超过缓存数限制,将第一个删除
              pruneCacheEntry(cahce, keys[0], keys, this._vnode)
            }
         }
         
          vnode.data.keepAlive = true //渲染和执行被包裹组件的钩子函数需要用到
     
     }
     return vnode || (slot && slot[0])
    }
    
    • 第一步:获取keep-alive包裹着的第一个子组件对象及其组件名;
    • 第二步:根据设定的黑白名单(如果有)进行条件匹配,决定是否缓存。不匹配,直接返回组件实例(VNode),否则执行第三步;
    • 第三步:根据组件ID和tag生成缓存Key,并在缓存对象中查找是否已缓存过该组件实例。如果存在,直接取出缓存值并更新该key在this.keys中的位置(更新key的位置是实现LRU置换策略的关键),否则执行第四步;
    • 第四步:在this.cache对象中存储该组件实例并保存key值,之后检查缓存的实例数量是否超过max设置值,超过则根据LRU置换策略删除最近最久未使用的实例(即是下标为0的那个key);
    • 第五步:最后并且很重要,将该组件实例的keepAlive属性值设置为true。

    四、重头戏:渲染

    4.1 Vue的渲染过程

    借助一张图看下Vue渲染的整个过程:

    Vue的渲染是从图中render阶段开始的,但keep-alive的渲染是在patch阶段,这是构建组件树(虚拟DOM树),并将VNode转换成真正DOM节点的过程。
    简单描述从render到patch的过程
    我们从最简单的new Vue开始:

    import App from './App.vue'
    
    new Vue({
        render: h => h(App)
    }).$mount('#app')
    
    • Vue在渲染的时候先调用原型上的_render函数将组件对象转化成一个VNode实例;而_render是通过调用createElement和createEmptyVNode两个函数进行转化;
    • createElement的转化过程会根据不同的情形选择new VNode或者调用createComponent函数做VNode实例化;

    完成VNode实例化后,这时候Vue调用原型上的_update函数把VNode渲染成真实DOM,这个过程又是通过调用patch函数完成的(这就是patch阶段了)
    用一张图表达:

    4.2 keep-alive组件的渲染

    我们用过keep-alive都知道,它不会生成真正的DOM节点,这是怎么做到的?

    // src/core/instance/lifecycle.js
    export function initLifecycle (vm: Component) {
        const options= vm.$options
        // 找到第一个非abstract父组件实例
        let parent = options.parent
        if (parent && !options.abstract) {
            while (parent.$options.abstract && parent.$parent) {
                  parent = parent.$parent
            }
            parent.$children.push(vm)
        }
        vm.$parent = parent
        // ...
    }
    

    Vue在初始化生命周期的时候,为组件实例建立父子关系会根据abstract属性决定是否忽略某个组件。在keep-alive中,设置了abstract:true,那Vue就会跳过该组件实例。

    最后构建的组件树中就不会包含keep-alive组件,那么由组件树渲染成的DOM树自然也不会有keep-alive相关的节点了。

    keep-alive包裹的组件是如何使用缓存的?
    在patch阶段,会执行createComponent函数:

    // src/core/vdom/patch.js
    function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
        let i = vnode.data
        if (isDef(i)) {
            const isReactivated = isDef(vnode.componentInstance) && i.keepAlive
            if (isDef(i = i.hook) && isDef(i = i.init)) {
                i(vnode, false)
            }
            if (isDef(vnode.componentInstance)) {
                initComponent(vnode, insertedVnodeQueue)
                insert(parentElem, vnode.elem, refElem) // 将缓存的DOM(vnode.elem) 插入父元素中
                if (isTrue(isReactivated)) {
                    reactivateComponent(vnode, insertedVnodeQueue, parentEle, refElm)
                }
                return true
            }
        }
    }
    
    • 在首次加载被包裹组建时,由keep-alive.js中的render函数可知,vnode.componentInstance的值是undfined,keepAlive的值是true,因为keep-alive组件作为父组件,它的render函数会先于被包裹组件执行;那么只执行到i(vnode,false),后面的逻辑不执行;
    • 再次访问被包裹组件时,vnode.componentInstance的值就是已经缓存的组件实例,那么会执行insert(parentElm, vnode.elm, refElm)逻辑,这样就直接把上一次的DOM插入到父元素中。

    五、不可忽视:钩子函数

    5.1 只执行一次的钩子

    一般的组件,每一次加载都会有完整的生命周期,即生命周期里面对于的钩子函数都会被触发,为什么被keep-alive包裹的组件却不是呢?
    被缓存的组件实例会为其设置keepAlive= true,而在初始化组件钩子函数中:

    // src/core/vdom/create-component.js
    const componentVNodeHooks = {
        init (vnode: VNodeWithData, hydrating: boolean): ?boolean{
            if (
             vnode.componentInstance &&       
             !vnode.componentInstance._isDestroyed &&
             vnode.data.keepAlive
            ) {
              // keep-alive components, treat as a patch
              const mountedNode:any = vnode
              componentVNodeHooks.prepatch(mountedNode, mountedNode)
            } else {
              const child = vnode.componentInstance = createComponentInstanceForVnode (vnode, activeInstance)
               
            }
        }
    }
    

    可以看出,当vnode.componentInstance和keepAlive同时为true时,不再进入$mount过程,那mounted之前的所有钩子函数(beforeCreate、created、mounted)都不再执行。

    5.2 可重复的activated

    在patch的阶段,最后会执行invokeInsertHook函数,而这个函数就是去调用组件实例(VNode)自身的insert钩子:

    // src/core/vdom/patch.js
    function invokeInsertHook (vnode, queue, initial) {
          if (isTrue(initial) && isDef(vnode.parent)) {
              vnode.parent.data,pendingInsert = queue
          } else {
             for(let i =0; i<queue.length; ++i) {
                    queue[i].data.hook.insert(queue[i]) // 调用VNode自身的insert钩子函数
             }
          }
    }
    

    再看insert钩子:

    const componentVNodeHooks = {
          // init()
         insert (vnode: MountedComponentVNode) {
               const { context, componentInstance } = vnode
               if (!componentInstance._isMounted) {
                     componentInstance._isMounted = true
                     callHook(componentInstance, 'mounted')
               }
               if (vnode.data.keepAlive) {
                     if (context._isMounted) {
                         queueActivatedComponent(componentInstance)
                     } else {
                          activateChildComponent(componentInstance, true/* direct */)
                     }
              }
             // ...
         }
    }
    

    在这个钩子里面,调用了activateChildComponent函数递归地去执行所有子组件的activated钩子函数:

    // src/core/instance/lifecycle.js
    export function activateChildComponent (vm: Component, direct?: boolean) {
      if (direct) {
        vm._directInactive = false
        if (isInInactiveTree(vm)) {
          return
        }
      } else if (vm._directInactive) {
        return
      }
      if (vm._inactive || vm._inactive === null) {
        vm._inactive = false
        for (let i = 0; i < vm.$children.length; i++) {
          activateChildComponent(vm.$children[i])
        }
        callHook(vm, 'activated')
      }
    }
    

    相反地,deactivated钩子函数也是一样的原理,在组件实例(VNode)的destroy钩子函数中调用deactivateChildComponent函数。

     

    更多相关内容
  • 守护者应用 此应用程序是基于ReactJs,并在这里展开-
  • 最佳运动类APP-Keep原型设计与欣赏

    千次阅读 2018-11-23 09:56:27
    尤其是像我们这种设计师,每天的工作就是坐在电脑前做产品定位分析、用户调研、业务需求分析、目标用户画像、用户需求分析、原型设计,交互设计文档等等。日常的运动更是必不可少。当然,今天不是来和大家说运动...

    运动类APP是大家手机中必备的一款软件。如果说谁手机里没有任何涉及运动类APP,那只能说真的与时代脱轨了。近些年随着物质生活条件的改善,人们开始越来越重视自己的身体,所以也越来越多的人会进行身体锻炼。

    尤其是像我们这种设计师,每天的工作就是坐在电脑前做产品定位分析、用户调研、业务需求分析、目标用户画像、用户需求分析、原型设计,交互设计文档等等。日常的运动更是必不可少。当然,今天不是来和大家说运动的重要性。接下来要做的是带领大家一起来分析和欣赏当今最佳一款运动类APP-Keep的设计,谁叫我这么热爱工作,每天沉迷于工作不能自拔呢,哈哈。希望对交互设计感兴趣的设计师朋友们有所用处。

     

    首先,和大家来简单介绍一下这款最佳运动类APP-Keep。Keep是一款具有社交属性的运动健身类产品。用户可以充分利用碎片化的时间,随时随地选择适合自己的健身课程进行真人同步训练。从2015 年 2 月上线至今,注册用户量已过1亿。在中国手机应用运动类APP指数排名第一(数据取自艾媒北极星)。那到底是什么样的设计造就了如此好的用户体验,从而吸引大量用户注册使用呢。接下来和大家一起一探究竟。

    1.产品定位

    基于健身教学视频的运动类APP,并融合社区、活动挑战、商城、饮食等功能模块,通过提供用户互动及运动装备购买,力求打造线上健身平台的闭环。

    2.用户分析

    ①性别占比

     

    根据艾媒北极星给出的统计数据来看,在使用用户中,男士比例为33.91%,女士比例为66.09%。

    ②年龄占比

     

    根据艾媒北极星给出的统计数据来看,用户年龄集中在30岁以下。

    3.特色功能介绍

    相比其他的运动类APP,在Keep中有一系列形式多样的健身计划、还通过推荐健身搭配饮食来满足用户的其他需求,让用户在健身过程中享受乐趣。

    真人同步训练,记录训练:以视频全程语音督导,自动同步进度。每次训练都会预留休息时间,不需要用户去想,只需跟着视频语音来锻炼,对于用户来说,具有很强的冲击力和趣味性。

    发布个人动态:分享健身成果,拍照记录每一天的变化,分享给好友相互鼓励,让健身不再孤独。

    徽章:通过训练可获得相应等级徽章并一键分享到不同渠道,让用户产生攀比心理,制造目标,促使用户去完成任务获得徽章。

    课程表:针对不同人群,制定不同锻炼任务,以日历的方式显示每天的任务,每次到锻炼时间会及时提醒。切实做到量体裁衣。

    4. 信息架构分析

    5. 原型设计分析及实现技巧

    提到原型设计,原型工具就必不可少了。有人说,我可以使用手绘啊,这个在此不多做评价,有兴

    趣的可以看看我之前的文章(纸上原型设计 VS 桌面原型工具设计,你更喜欢谁?)。当然,个人

    更推荐使用原型设计工具。目前市场上的原型设计工具琳琅满目,在这里,根据个人多年设计经

    验,推荐大家使用国产Mockplus做原型设计。其上手之快,操作之便捷,效率之高,也只有你身体

    力行后才能够体会了。

    废话不多说,先来尝鲜小编以Mockplus制作的运动类APP-Keep的原型。

    成品原型图:

     

    原型在线演示地址:

    https://run.mockplus.cn/tTUqShHAXPfczBUr/index.html

    原型微信扫码演示地址:

    原型设计解读及实现技巧:

    从界面中,我们可以看出,此APP中有4个底部导航菜单(运动、发现、社区、我)。在运动、社区这两个页面的布局均是通过点击标签组切换至不同页面。此外,在单独页面中,内容的布局很多都是一致的。这些在Mockplus中均有封装好的组件和图标,可快速设计出原型。

    ① 底部导航菜单栏设计

    使用“带文字图标”组件,直接在图标库中填充对应图标。布局好之后,直接将其添加至个人的组件库,其余页面直接复用。

    ②菜单内的页面切换

    直接使用标签组配合内容面板,轻松拖拽鼠标即可实现页面切换。(详情见:http://doc.mockplus.cn/?p=387

    ③页面内内容布局设计

    内容页的布局均是一样的,我们只需做好一个,然后直接将其转换为快速格子,快速实现重复布局。而里面的内容及图片,可直接使用自带的填充功能。(详情见:http://doc.mockplus.cn/?p=2811

    运动类APP在市场上还有很多,如小米运动,悦动圈,咕咚等。对交互设计感兴趣的朋友可以选择几款APP使用Mockplus做出交互原型。相信可以为你后期快速将产品构想变为可视界面奠定坚实基础,一起加油吧,设计圈的骚年们!

    展开全文
  • Keep低保真交互原型.rp

    2022-05-28 18:06:15
    Keep低保真交互原型.rp,供参考和学习使用
  • 名称:90+套Axure原型图设计源文件 格式:RP格式(Axure软件) 产品经理全套文档模板 Axure8可以打开8、7版本制作 Axure9可以全部打开9、8、7版本制作 ——网站 阿里云网站.rp 车辆违章处理.rp 城市介绍网站.rp ...
  • Keep APP 产品需求文档 PRD ,Word版本,非PDF,可编辑,适合文档标准化,产品经理交付物规范资料
  • Axure8 产品原型图,包含电商,外卖,旅游,酒店,团购等
  • 原型

    2021-02-20 18:04:02
    自述文件 该自述文件通常会记录启动和运行应用程序所需的所有步骤。 您可能要讲的内容: Ruby版本 系统依赖 配置 数据库创建 数据库初始化 如何运行测试套件 服务(作业队列,缓存服务器,搜索引擎等) ...
  • KEEP-Kotlin的演变和增强过程 该存储库包含有关建议,包括设计说明草稿和正在进行中的建议的讨论,以及有关已实施的更改的设计文档。 提案本身通称KEEP。... 设计方案和原型实施。 语言的实验支持。
  • 【高保真带交互】定制健身APP原型模板 编辑推荐 在线演示 软件版本:Axure 8.1 产品类型:高保真健身运动APP 当前版本:v2.0 产品简介:本作品是一款私人订单健身运动APP原型模版,主要以训练计划+饮食指导为准...
  • Medirectory是医疗保健目录的原型,旨在探索构建目录的技术方面。 我的目录 使用“国家计划和提供者枚举系统(NPPES)”提供者和组织数据集以及“医师比较”数据集进行填充 提供健壮的RESTful接口,专为机器对机器的...
  • 原型空间

    2021-02-14 03:37:33
    has_many:原型 评论テーブル 哥伦 类型 选项 文本 文本 不为空 用户 参考 原型 参考 协会 归属用户:用户 当属:原型 原型テーブル 哥伦 类型 选项 标题 细绳 不为空 catch_copy 文本 不为空 概念 文本 不为空 ...
  • 墨刀构建的医疗类APP原型,主要包括健康中心、纠正、商城、社区四大板块,页面设计精美,功能完善。
  • 项目是基于甲方已有的产品设计,甲方会提供设计风格、规范 项目名称 主要内容 单价 数量 单位 价格(元) 主操作页设计 1选择城市页(往返)2搜索结果页(往返)3机票信息页(往返)4低价视图(往返)5机票速递页...
  • 运动类APP-Keep.zip

    2021-08-30 18:39:10
    运动类app原型图,方便前端开发或者ui设计师参考
  • prototype:原型

    2021-05-16 09:17:29
    自述文件 该自述文件通常会记录启动和运行应用程序所需的所有步骤。 您可能要讲的内容: Ruby版本 系统依赖 配置 数据库创建 数据库初始化 如何运行测试套件 服务(作业队列,缓存服务器,搜索引擎等) ...
  • keep-alive 有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件 <keep-alive> 包裹...

    keep-alive

    有时候我们不希望组件被重新渲染影响使用体验;或者处于性能考虑,避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件

    <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。 当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中,activated 和 deactivated 将会在 <keep-alive> 树内的所有嵌套组件中触发。 主要用于保留组件状态或避免重新渲染

    应用场景

    如果未使用keep-alive组件,则在页面回退时仍然会重新渲染页面,触发created钩子,使用体验不好。 在以下场景中使用keep-alive组件会显著提高用户体验,菜单存在多级关系,多见于列表页+详情页的场景如:

    • 商品列表页点击商品跳转到商品详情,返回后仍显示原有信息
    • 订单列表跳转到订单详情,返回,等等场景。

    keep-alive的生命周期

    • 初次进入时:created > mounted > activated;退出后触发 deactivated
    • 再次进入:会触发 activated;事件挂载的方法等,只执行一次的放在 mounted 中;组件每次进去执行的方法放在 activated 中

    实践

    <div id="app" class='wrapper'>
        <keep-alive>
            <!-- 需要缓存的视图组件 --> 
            <router-view v-if="$route.meta.keepAlive"></router-view>
         </keep-alive>
          <!-- 不需要缓存的视图组件 -->
         <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>

    在路由中设置keepAlive

    {
      path: 'list',
      name: 'itemList', // 商品管理
      component (resolve) {
        require(['@/pages/item/list'], resolve)
     },
     meta: {
      keepAlive: true,
      title: '商品管理'
     }
    }

    更改 beforeEach钩子

    这一步是为了清空无用的页面缓存。 假设现在A、B两个页面都开启的缓存:

    • 若第一次进入A页面后退出,再次进入页面时,页面不会刷新。这和目前的业务逻辑不符。我们想要的结果是A页面前进后返回,页面保持不变,而不是退出后重新进入保持不变。
    • 在进入过A页面后进入B页面,经过测试后发现,B页面竟然会显示A页面的缓存,尽管url已经改变

    为了解决这个问题,需要判断页面是在前进还是后退。 在beforeEach钩子添加代码

    let toDepth = to.path.split('/').length
    let fromDepth = from.path.split('/').length
    if (toDepth < fromDepth) {
      // console.log('back...')
      from.meta.keepAlive = false
      to.meta.keepAlive = true
    }

    记录页面滚动位置

    keep-alive并不会记录页面的滚动位置,所以我们在跳转时需要记录当前的滚动位置,在触发activated钩子时重新定位到原有位置。

    在deactivated钩子中记录当前滚动位置,使用localStorage

    deactivated () {
     window.localStorage.setItem(this.key, JSON.stringify({
     listScrollTop: this.scrollTop
     }))
    }

    在activated钩子中滚动

    this.cacheData = window.localStorage.getItem(this.key) ?JSON.parse(window.localStorage.getItem(this.key)) : null
    $('.sidebar-item').scrollTop(this.cacheData.listScrollTop)

    • 在动态组件中的应用
    <keep-alive :include="whiteList" :exclude="blackList" :max="amount">
         <component :is="currentComponent"></component>
    </keep-alive>
    
    • 在vue-router中的应用
    <keep-alive :include="whiteList" :exclude="blackList" :max="amount">
        <router-view></router-view>
    </keep-alive>
    

    include定义缓存白名单,keep-alive会缓存命中的组件;exclude定义缓存黑名单,被命中的组件将不会被缓存;max定义缓存组件上限,超出上限使用LRU的策略置换缓存数据。


    源码剖析

    keep-alive.js内部还定义了一些工具函数,我们按住不动,先看它对外暴露的对象

    // src/core/components/keep-alive.js
    export default {
      name: 'keep-alive',
      abstract: true, // 判断当前组件虚拟dom是否渲染成真实dom的关键
      props: {
          include: patternTypes, // 缓存白名单
          exclude: patternTypes, // 缓存黑名单
          max: [String, Number] // 缓存的组件
      },
      created() {
         this.cache = Object.create(null) // 缓存虚拟dom
         this.keys = [] // 缓存的虚拟dom的键集合
      },
      destroyed() {
        for (const key in this.cache) {
           // 删除所有的缓存
           pruneCacheEntry(this.cache, key, this.keys)
        }
      },
     mounted() {
       // 实时监听黑白名单的变动
       this.$watch('include', val => {
           pruneCache(this, name => matched(val, name))
       })
       this.$watch('exclude', val => {
           pruneCache(this, name => !matches(val, name))
       })
     },
    
     render() {
        // 先省略...
     }
    }
    

    可以看出,与我们定义组件的过程一样,先是设置组件名为keep-alive,其次定义了一个abstract属性,值为true。这个属性在vue的官方教程并未提及,却至关重要,后面的渲染过程会用到。props属性定义了keep-alive组件支持的全部参数。

    keep-alive在它生命周期内定义了三个钩子函数:

    • created
      初始化两个对象分别缓存VNode(虚拟DOM)和VNode对应的键集合
    • destroyed
      删除this.cache中缓存的VNode实例。我们留意到,这不是简单地将this.cache置为null,而是遍历调用pruneCacheEntry函数删除。
    // src/core/components/keep-alive.js
    function pruneCacheEntry (
      cache: VNodeCache,
      key: string,
      keys: Array<string>,
      current?: VNode
    ) {
     const cached = cache[key]
     if (cached && (!current || cached.tag !== current.tag)) {
        cached.componentInstance.$destroyed() // 执行组件的destroy钩子函数
     }
     cache[key] = null
     remove(keys, key)
    }
    
    

    删除缓存的VNode还要对应组件实例的destory钩子函数

    • mounted
      在mounted这个钩子中对include和exclude参数进行监听,然后实时地更新(删除)this.cache对象数据。pruneCache函数的核心也是去调用pruneCacheEntry
    function pruneCache (keepAliveInstance: any, filter: Function) {
      const { cache, keys, _vnode } = keepAliveInstance
      for (const key in cache) {
        const cachedNode: ?VNode = cache[key]
        if (cachedNode) {
          const name: ?string = getComponentName(cachedNode.componentOptions)
          if (name && !filter(name)) {
            pruneCacheEntry(cache, key, keys, _vnode)
          }
        }
      }
    }
    
    • render
    render () {
      const slot = this.$slots.defalut
      const vnode: VNode = getFirstComponentChild(slot) // 找到第一个子组件对象
      const componentOptions : ?VNodeComponentOptions = vnode && vnode.componentOptions
      if (componentOptions) { // 存在组件参数
        // check pattern
        const name: ?string = getComponentName(componentOptions) // 组件名
        const { include, exclude } = this
        if (// 条件匹配
          // not included
          (include && (!name || !matches(include, name)))||
          // excluded
            (exclude && name && matches(exclude, name))
        ) {
            return vnode
        }
        
        const { cache, keys } = this
        // 定义组件的缓存key
        const key: ?string = vnode.key === null ? componentOptions.Ctor.cid + (componentOptions.tag ? `::${componentOptions.tag}` : '') : vnode.key
         if (cache[key]) { // 已经缓存过该组件
            vnode.componentInstance = cache[key].componentInstance
            remove(keys, key)
            keys.push(key) // 调整key排序
         } else {
            cache[key] = vnode //缓存组件对象
            keys.push(key)
            if (this.max && keys.length > parseInt(this.max)) {
              //超过缓存数限制,将第一个删除
              pruneCacheEntry(cahce, keys[0], keys, this._vnode)
            }
         }
         
          vnode.data.keepAlive = true //渲染和执行被包裹组件的钩子函数需要用到
     
     }
     return vnode || (slot && slot[0])
    }
    
    • 第一步:获取keep-alive包裹着的第一个子组件对象及其组件名;
    • 第二步:根据设定的黑白名单(如果有)进行条件匹配,决定是否缓存。不匹配,直接返回组件实例(VNode),否则执行第三步;
    • 第三步:根据组件ID和tag生成缓存Key,并在缓存对象中查找是否已缓存过该组件实例。如果存在,直接取出缓存值并更新该key在this.keys中的位置(更新key的位置是实现LRU置换策略的关键),否则执行第四步;
    • 第四步:在this.cache对象中存储该组件实例并保存key值,之后检查缓存的实例数量是否超过max设置值,超过则根据LRU置换策略删除最近最久未使用的实例(即是下标为0的那个key);
    • 第五步:最后并且很重要,将该组件实例的keepAlive属性值设置为true。

    四、重头戏:渲染

    4.1 Vue的渲染过程

    借助一张图看下Vue渲染的整个过程:


    Vue的渲染是从图中render阶段开始的,但keep-alive的渲染是在patch阶段,这是构建组件树(虚拟DOM树),并将VNode转换成真正DOM节点的过程。
    简单描述从render到patch的过程
    我们从最简单的new Vue开始:

    import App from './App.vue'
    
    new Vue({
        render: h => h(App)
    }).$mount('#app')
    
    • Vue在渲染的时候先调用原型上的_render函数将组件对象转化成一个VNode实例;而_render是通过调用createElement和createEmptyVNode两个函数进行转化;
    • createElement的转化过程会根据不同的情形选择new VNode或者调用createComponent函数做VNode实例化;
    • 完成VNode实例化后,这时候Vue调用原型上的_update函数把VNode渲染成真实DOM,这个过程又是通过调用patch函数完成的(这就是patch阶段了)
      用一张图表达:

    4.2 keep-alive组件的渲染

    我们用过keep-alive都知道,它不会生成真正的DOM节点,这是怎么做到的?

    // src/core/instance/lifecycle.js
    export function initLifecycle (vm: Component) {
        const options= vm.$options
        // 找到第一个非abstract父组件实例
        let parent = options.parent
        if (parent && !options.abstract) {
            while (parent.$options.abstract && parent.$parent) {
                  parent = parent.$parent
            }
            parent.$children.push(vm)
        }
        vm.$parent = parent
        // ...
    }
    

    Vue在初始化生命周期的时候,为组件实例建立父子关系会根据abstract属性决定是否忽略某个组件。在keep-alive中,设置了abstract:true,那Vue就会跳过该组件实例。

    最后构建的组件树中就不会包含keep-alive组件,那么由组件树渲染成的DOM树自然也不会有keep-alive相关的节点了。

    keep-alive包裹的组件是如何使用缓存的?
    在patch阶段,会执行createComponent函数:

    // src/core/vdom/patch.js
    function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {
        let i = vnode.data
        if (isDef(i)) {
            const isReactivated = isDef(vnode.componentInstance) && i.keepAlive
            if (isDef(i = i.hook) && isDef(i = i.init)) {
                i(vnode, false)
            }
            if (isDef(vnode.componentInstance)) {
                initComponent(vnode, insertedVnodeQueue)
                insert(parentElem, vnode.elem, refElem) // 将缓存的DOM(vnode.elem) 插入父元素中
                if (isTrue(isReactivated)) {
                    reactivateComponent(vnode, insertedVnodeQueue, parentEle, refElm)
                }
                return true
            }
        }
    }
    
    • 在首次加载被包裹组建时,由keep-alive.js中的render函数可知,vnode.componentInstance的值是undfined,keepAlive的值是true,因为keep-alive组件作为父组件,它的render函数会先于被包裹组件执行;那么只执行到i(vnode,false),后面的逻辑不执行;
    • 再次访问被包裹组件时,vnode.componentInstance的值就是已经缓存的组件实例,那么会执行insert(parentElm, vnode.elm, refElm)逻辑,这样就直接把上一次的DOM插入到父元素中。

    五、不可忽视:钩子函数

    5.1 只执行一次的钩子

    一般的组件,每一次加载都会有完整的生命周期,即生命周期里面对于的钩子函数都会被触发,为什么被keep-alive包裹的组件却不是呢?
    被缓存的组件实例会为其设置keepAlive= true,而在初始化组件钩子函数中:

    // src/core/vdom/create-component.js
    const componentVNodeHooks = {
        init (vnode: VNodeWithData, hydrating: boolean): ?boolean{
            if (
             vnode.componentInstance &&       
             !vnode.componentInstance._isDestroyed &&
             vnode.data.keepAlive
            ) {
              // keep-alive components, treat as a patch
              const mountedNode:any = vnode
              componentVNodeHooks.prepatch(mountedNode, mountedNode)
            } else {
              const child = vnode.componentInstance = createComponentInstanceForVnode (vnode, activeInstance)
               
            }
        }
    }
    

    可以看出,当vnode.componentInstance和keepAlive同时为true时,不再进入$mount过程,那mounted之前的所有钩子函数(beforeCreate、created、mounted)都不再执行。

    5.2 可重复的activated

    在patch的阶段,最后会执行invokeInsertHook函数,而这个函数就是去调用组件实例(VNode)自身的insert钩子:

    // src/core/vdom/patch.js
    function invokeInsertHook (vnode, queue, initial) {
          if (isTrue(initial) && isDef(vnode.parent)) {
              vnode.parent.data,pendingInsert = queue
          } else {
             for(let i =0; i<queue.length; ++i) {
                    queue[i].data.hook.insert(queue[i]) // 调用VNode自身的insert钩子函数
             }
          }
    }
    

    再看insert钩子:

    const componentVNodeHooks = {
          // init()
         insert (vnode: MountedComponentVNode) {
               const { context, componentInstance } = vnode
               if (!componentInstance._isMounted) {
                     componentInstance._isMounted = true
                     callHook(componentInstance, 'mounted')
               }
               if (vnode.data.keepAlive) {
                     if (context._isMounted) {
                         queueActivatedComponent(componentInstance)
                     } else {
                          activateChildComponent(componentInstance, true/* direct */)
                     }
              }
             // ...
         }
    }
    

    在这个钩子里面,调用了activateChildComponent函数递归地去执行所有子组件的activated钩子函数:

    // src/core/instance/lifecycle.js
    export function activateChildComponent (vm: Component, direct?: boolean) {
      if (direct) {
        vm._directInactive = false
        if (isInInactiveTree(vm)) {
          return
        }
      } else if (vm._directInactive) {
        return
      }
      if (vm._inactive || vm._inactive === null) {
        vm._inactive = false
        for (let i = 0; i < vm.$children.length; i++) {
          activateChildComponent(vm.$children[i])
        }
        callHook(vm, 'activated')
      }
    }
    

    相反地,deactivated钩子函数也是一样的原理,在组件实例(VNode)的destroy钩子函数中调用deactivateChildComponent函数。

    展开全文
  • 我打算将线框图,原型,photoshop文件和纯HTML / CSS文件上传到此存储库。 我需要先压缩它们,因为文件需要很大。 它们最终将可用。 当我接受Ruby和Ruby on Rails的培训时,我选择了它们作为构建该项目的选项。 ...
  • 主要介绍了彻底揭秘keep-alive原理(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • tamsin:tamsin 原型

    2021-06-29 20:06:55
    自述 此自述文件通常会记录启动和运行应用程序所需的任何步骤。 您可能想要涵盖的内容: Ruby版 系统依赖 配置 数据库创建 数据库初始化 如何运行测试套件 服务(作业队列、缓存服务器、搜索引擎等) ...
  • 基于简单I / O板的开源物理计算平台和实现处理/布线语言的开发环境。 Arduino可用于开发独立的交互式对象,也可以连接到计算机上的软件(例如Flash,Processing和MaxMSP)。
  • NHS.UK 原型套件访问以下载最新版本并阅读文档。关于 NHS.UK 原型套件NHS.UK 原型套件使您能够制作看起来像 NHS.UK 页面的交互式原型。 您制作的原型是向他人展示想法和进行用户研究的好方法。安全如果您在线发布您...
  • Keep低保真交互.rp

    2022-05-28 18:15:04
    Keep低保真交互.rp,运动健康产品设计原型,供参考和学习使用
  • 适合于软件工程学习人群
  • GOV.UK 原型设计工具这个应用程序的目的是让 GOV.UK 的设计师能够制作 html 布局的原型,这些布局可以链接在一起并公开发布以进行研究和可用性测试。 这主要是为用户格式设计人员开发的,但没有理由其他设计人员也不...
  • gitpub ... 它目前可以使用,但是会在存储库中的特定位置生成一个固定的Jekyll发布文件,并且没有记录! 正在工作 (发布) git中小文件的简单文件处理。 支持简单的jekyll post模式。...强大的文件处理能力(S3,...
  • 快速原型在这个 repo 中,我们希望完成快速原型设计。 第一个原型将用于 PCM 引擎,以便进行建模和执行的第一个展示。发动机原型[JComparser] ( ) [基于Java的JEngine] ( ) [基于 RoR 的 JEngine] ( )
  • custom maven-archetypes 用SVN/Git客户端检出项目 SVN: svn://gitee.com/longshu/maven-archetypes Git: ...quickstart mvnw clean install mvnw archetype:crawl ...来至的整理 相关文章
  • devmine-原型 这是 devmine 项目应该做的事情的一个非常基本的原型
  • 快速扩展原型开发 完整的编辑器:控制器,模型,模板,修改和事件 自动在OpenCart工作流程中添加/删除事件和修改 多店支持 在Gist软件包中重新分发子模块 与所有OpenCart主题兼容 一流的模块架构,不会覆盖任何文件 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,247
精华内容 4,898
关键字:

keep原型