放肆青春的博客
首页
前端
算法
网络
面试
技术
后端
运维
杂项
数据库
工具
网址
电脑
个人
文章
  • 分类
  • 标签
  • 归档
github (opens new window)
gitee (opens new window)

放肆青春

一个前端菜鸟的技术成长之路
首页
前端
算法
网络
面试
技术
后端
运维
杂项
数据库
工具
网址
电脑
个人
文章
  • 分类
  • 标签
  • 归档
github (opens new window)
gitee (opens new window)
  • 前端

    • 前端 概览
    • 前端汇总

    • front 博文

    • front 项目总结

    • front 高级

    • front tools

  • vue

    • vue 概览
    • vue 汇总

    • vue 博文

    • vue 项目总结

    • vue 高级

      • vue 原理汇总
      • vue3新特性
      • watch原理
      • computed原理
      • vue响应式原理
      • vue双向数据绑定
      • key原理
      • 虚拟DOM
      • diff算法
      • keep-alive原理
        • nextTick原理
        • scoped原理
        • vue模板编译
        • vue渲染机制
        • vue api原理
        • vue实例方法原理
        • vue源码
    • html

      • html 概览
      • html 汇总

      • html 博文

    • css

      • css 概览
      • css 汇总

      • css 博文

      • sass

      • less

    • js

      • javascript 概览
      • JS 汇总

      • ES6

      • JS 博文

      • JS 工具

    • node

      • node 概览
      • node 汇总

      • node 框架

      • node 博文

    • react

      • react 概览
      • react 汇总

      • react 博文

      • react 高级

    • 微信小程序

      • 微信小程序 概览
      • 微信小程序总结
      • 微信小程序文章
      • 微信小程序 博文

      • 微信小程序 高级

    • 微信公众号

      • 微信公众号 概览
      • 微信公众号总结
      • 微信公众号文章
    • 多端开发

      • 多端开发
      • dsbridge 概览
      • jsbridge 概览
      • webview
      • uniapp

        • uniapp 概览
      • taro

        • taro 概览
      • flutter

        • flutter 概览
        • flutter 环境搭建
      • electron

        • electron 概览
    • front
    放肆青春
    2021-05-12

    keep-alive原理

    # 作用

    包裹动态组件时,会缓存不活动的组件实例

    # 两个钩子

    1. activated 被 keep-alive 缓存的组件激活时调用。

    2. deactivated 被 keep-alive 缓存的组件停用时调用。

    # 三个属性

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

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

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

    # 原理

    使用了 LRU 的缓存策略。(Least Recently Used 最近最少使用)

    LRU 的核心思想是如果数据最近被访问过,那么将来被访问的几率也更高,优先淘汰最近没有被访问到的数据

    算法:

    1. this.keys 数组用来存储数据

    2. 将新数据从尾部插入到 this.keys 中

    3. 每当缓存命中(即缓存数据被访问),则将数据移到 this.keys 的尾部;

    4. 当 this.keys 满的时候,将头部的数据丢弃;

    更新时间: 5/28/2021, 10:53:25 AM
    diff算法
    nextTick原理

    ← diff算法 nextTick原理→

    最近更新
    01
    前端权限管理
    02-24
    02
    vue2指令
    02-24
    03
    vue2 hook
    02-24
    更多文章>
    Theme by Vdoing | Copyright © 2019-2022 放肆青春
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式