• 主页
  • 归档
我的文章 友链 关于我

  • 主页
  • 归档

keep-alive缓存组件

2024-04-25

keep-alive缓存组件

使用场景

当用户切换Tab页的时候,我们需要缓存住用户已经输入的信息,当切换回来的时候不让已经填写的数据清空,就使用keep-alive缓存组件

代码样例

1
2
3
4
5
6
7
8
9
10
<template>
<keep-alive>
<A v-if="flag"></A>
<B v-else></B>
</keep-alive>
</template>

<script>
const flag = ref('false')//当flag发生改变的时候,组件切换
</script>

keep-alive缓存组件默认缓存中间的所有组件,但是在任何时候keep-alive内部只能有一个组件加载(意思就是不用v-if中间就只能写一个组件)

同时keep-alive支持两种动态绑定 :include=”[‘A’]” 和 :exclude=”[‘B’]” ,中间填写组件,作用即名字

生命周期

被keep-alive缓存组件包裹的组件会增加两个生命周期 onActivated 和 onDeactivated

当页面首次加载的时候,会触发一次onMounted钩子和onActivated钩子,切换组件的时候,会触发onDeactivated钩子

当再次切换回来到缓存组件的时候,只触发onActivated钩子,所以,在使用keep-alive缓存组件的组件中,只需要页面初始化进行一次的操作应该放在onMounted钩子中,而每一次切换到该页面都需要进行的操作应该放在onDeactivated钩子中

一点点源码

缓存组件的机制就是“卸载”的时候调用move函数把当前组件存储在一个临时容器中,当再次回来就从容器中拿回来

为什么keep-alive缓存组件不会被销毁和再次创建呢?

在keep-alive缓存组件中,他的子节点的vnode.shapeFlag会被打上512静态标记,就不会走挂载和卸载操作啦

写于综合阅览室

  • 提高用户体验
  • 缓存组件

扫一扫,分享到微信

微信分享二维码
Vue3中provide和inject的应用与原理
异步组件--骨架屏案例
  1. 1. keep-alive缓存组件
    1. 1.1. 使用场景
    2. 1.2. 代码样例
    3. 1.3. 生命周期
    4. 1.4. 一点点源码
© 2024 xixiIBN5100
  • 我的文章
  • 友链
  • 关于我

tag:

  • 新的开始
  • vue源码
  • diff算法
  • patch
  • vue
  • Ref
  • 响应式
  • 源码
  • computed
  • watch
  • 方法逻辑
  • typescript
  • 复选框
  • sass
  • css
  • bem
  • 全局组件
  • 递归组件
  • 动态组件
  • slot
  • 异步组件
  • 骨架屏
  • 性能优化
  • 提高用户体验
  • 缓存组件
  • provide
  • inject
  • 模式设计
  • 发布订阅模式
  • 观察者模式
  • eventBus
  • v-model
  • 自定义组件
  • 自定义指令
  • 防抖
  • 节流
  • 图片懒加载
  • 自定义插件
  • eventLoop
  • nextTick
  • Vue底层
  • 备忘录
  • webpack
  • 配置操作
  • 面试题
  • js
  • API
  • vue router
  • router4
  • 命名视图
  • 重定向
  • 路由元信息
  • 网络
  • 面试
  • Vue的设计与实现

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录(注意不是yilia根目录)执行以下命令:
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置:

      jsonContent:
        meta: false
        pages: false
        posts:
          title: true
          date: true
          path: true
          text: false
          raw: false
          content: false
          slug: false
          updated: false
          comments: false
          link: false
          permalink: false
          excerpt: false
          categories: false
          tags: true
    

  • zzbond
  • 钠盐酱
  • Tancy
  • 过路人
  • 橙汁
  • jj
沉淀