Vue keep-alive

keep-alive 的主要作用就是 缓存组件的状态 ,避免在组件切换时 销毁和重建组件实例 。它的工作原理是 在切换组件时,组件实例被缓存,而不是销毁,直到该组件被移除或不再需要时才会销毁。

keep-alive 的作用:

  • 缓存组件的状态:例如用户输入的数据、滚动位置、页面显示的内容等,都会被保留下来。你切换到其他组件,再切换回来时,这些状态都会被恢复,而不会丢失。
  • 提高性能:由于不需要每次切换时重新创建组件,避免了重复渲染带来的性能开销

keep-alive 是 Vue 提供的一个内置组件,主要用于缓存 组件实例,避免组件被切换时重新渲染,从而提高性能。它常用的场景和功能如下:

常见场景

  1. 页面缓存

    • 场景:在单页面应用(SPA)中,切换不同页面时,缓存页面状态,避免每次切换都重新加载和渲染。
    • 功能:当用户在不同页面间切换时,页面的状态(如滚动位置、输入框内容、表单数据等)可以被缓存,避免丢失。

    例子:电商网站的商品浏览页,当用户从商品页切换到购物车页面,再切换回来时,商品页的滚动位置和过滤条件可以被保留。

    vue 复制代码
    <keep-alive>
      <ProductList v-if="showProductList" />
    </keep-alive>
  2. 表单数据保持

    • 场景:当用户在表单中输入数据时,切换到其他页面后返回,避免数据丢失。
    • 功能:缓存表单数据,避免每次切换页面时都清空表单。

    例子:一个多步骤的表单,用户填写完第一个步骤后切换到其他页面,再返回时,之前的填写内容不丢失。

    vue 复制代码
    <keep-alive>
      <MultiStepForm v-if="showForm" />
    </keep-alive>
  3. 滚动位置保持

    • 场景:当用户滚动页面时,切换组件或页面,再次显示时,恢复滚动位置。
    • 功能:缓存滚动位置,避免用户每次返回页面时都需要重新滚动。

    例子:当用户浏览一个长列表时,切换到其他页面再切换回来,列表的滚动位置会被保留。

  4. 动态组件切换

    • 场景 :根据不同条件切换多个组件时,使用 keep-alive 来缓存这些组件,避免它们重新加载和销毁。
    • 功能:可以在多个组件间切换时,避免重复的创建和销毁操作,提升用户体验。

    例子:一个后台管理系统中,根据用户选择切换不同的管理模块(例如:用户管理、订单管理),每个模块的页面状态和数据都可以被缓存。

    vue 复制代码
    <keep-alive>
      <component :is="currentComponent" />
    </keep-alive>
  5. 条件性缓存

    • 场景:只缓存某些组件,而不缓存其他不需要缓存的组件。
    • 功能 :使用 excludeinclude 属性,动态控制哪些组件需要缓存,哪些不需要。

    例子:在一个大型的单页面应用中,某些页面或组件需要缓存,而其他临时页面则不需要缓存。

    vue 复制代码
    <keep-alive :exclude="['TemporaryComponent']">
      <ComponentToCache />
    </keep-alive>
  6. 分页或列表状态保持

    • 场景:在分页列表组件中,当用户翻页时,切换到其他页面后再回来时,保持分页的状态(例如:当前页码、筛选条件等)。
    • 功能:缓存分页信息,避免每次重新加载数据。

    例子:在一个带分页的商品列表中,用户选择了某页,然后切换到其他页面,返回时会自动恢复到之前的页码和筛选条件。

常用功能和用法

  1. includeexclude 属性

    • include:指定需要缓存的组件。
    • exclude:指定不需要缓存的组件。
    vue 复制代码
    <keep-alive :include="['ComponentA', 'ComponentB']">
      <component :is="currentComponent" />
    </keep-alive>
  2. max 属性

    • max:最大缓存数量。缓存的组件实例达到最大值时,会按 先入先出(FIFO) 的方式移除最旧的组件实例。
    vue 复制代码
    <keep-alive :max="5">
      <ComponentA />
    </keep-alive>
  3. activateddeactivated 生命周期钩子

    • activated:组件从缓存中激活时触发。
    • deactivated:组件被缓存时触发(即被隐藏)。

    这两个钩子通常用于执行在组件激活和停用时的某些操作。

    vue 复制代码
    <script>
    export default {
      activated() {
        console.log('Component is activated');
      },
      deactivated() {
        console.log('Component is deactivated');
      }
    };
    </script>
  4. key 属性

    • key:当 keep-alive 缓存多个相同组件时,key 可以用于区分这些组件。每个组件的 key 是唯一的,决定了组件的缓存。
    vue 复制代码
    <keep-alive>
      <component :is="currentComponent" :key="componentKey" />
    </keep-alive>

    在切换时,如果 key 不同,keep-alive 会将组件视为不同的实例,重新缓存它们。

总结

keep-alive 在 Vue 中有很多常见的使用场景,它主要用于:

  • 缓存组件状态,避免每次切换组件时重新渲染。
  • 优化性能,尤其是对于需要频繁切换和展示的组件,避免重复创建和销毁。
  • 保持滚动位置、表单数据等,改善用户体验。

通过合理地使用 keep-alive,你可以显著提高 Vue 应用的性能,尤其是对于复杂的单页应用(SPA)。

相关推荐
lbh2 小时前
Chrome DevTools 详解(一):Elements 面板
前端·javascript·浏览器
明里人2 小时前
React 状态库:Zustand 和 Jotai 怎么选?
前端·javascript·react.js
sniper_fandc2 小时前
Vue3双向数据绑定v-model
前端·vue
訾博ZiBo3 小时前
为什么我的 React 组件会无限循环?—— 一次由 `onClick` 引发的“惨案”分析
前端·react.js
儒雅的烤地瓜3 小时前
JS | 如何把一个伪数组转换成一个真正的数组?
javascript·from方法·数组转换·扩展运算符·slice方法·push方法
my一阁3 小时前
一文解决Chrome使用
前端·chrome
IT_陈寒3 小时前
SpringBoot性能调优实战:5个让接口响应速度提升300%的关键配置
前端·人工智能·后端
訾博ZiBo4 小时前
告别 v-model 焦虑:在 React 中优雅地处理『双向绑定』
前端·react.js
β添砖java4 小时前
交互动效设计
前端·javascript·交互