记录--Vue的缓存组件 | 详解KeepAlive

这篇具有很好参考价值的文章主要介绍了记录--Vue的缓存组件 | 详解KeepAlive。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

记录--Vue的缓存组件 | 详解KeepAlive

前言

一. keep-alive 的作用

二. keep-alive 的原理

三. keep-alive 的应用

四. keep-alive 的刷新

五. keep-alive 页面缓存思路

一. keep-alive 的作用

首先引用官网文档介绍:keep-alive官方文档

Vue 的 keep-alive为抽象组件,主要用于缓存内部组件数据状态。可以将组件缓存起来并在需要时重新使用,而不是每次重新创建。这可以提高应用的性能和用户体验,特别是在需要频繁切换组件时。

Props: include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max - 数字。最多可以缓存多少组件实例。

用法:

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

当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

通常情况下,组件在销毁时会释放它所占用的资源,如 DOM 元素、监听器、定时器等。而当组件需要重新使用时,需要重新创建这些资源,这会消耗额外的时间和性能。

使用 keep-alive 组件可以避免这种情况,它可以将组件缓存起来并在需要时直接使用,而不需要重新创建。这样可以节省资源和提高性能,特别是对于那些需要频繁切换的组件,比如 Tab 切换、路由切换等等。

另外,keep-alive 组件也提供了一些钩子函数,可以用来在组件激活和失活时执行一些操作,比如更新数据、发送请求等等。这些钩子函数包括:

  • activated: 组件被激活时调用,可以用来更新数据等操作。

  • deactivated: 组件被缓存时调用,可以用来清除数据等操作。

需要注意的是,keep-alive 组件只能缓存有状态组件,不能缓存无状态组件(比如纯展示组件)。此外,如果需要缓存多个组件,需要使用 v-for 循环遍历,而且每个缓存的组件必须有一个唯一的 key 属性。

总之,keep-alive 组件可以提高应用的性能和用户体验,特别是在需要频繁切换组件时。但需要注意使用时的细节和限制。

二. keep-alive 的原理

keep-alive 组件的实现原理是将被缓存的组件实例存储到一个缓存对象中,当需要重新渲染这个组件时,会从缓存中获取到之前的实例,并将其重新挂载到 DOM 上。

从Vue的渲染看keep-alive的渲染

记录--Vue的缓存组件 | 详解KeepAlive

Vue的渲染是从图中render阶段开始的
但keep-alive的渲染是在patch阶段(构建组件树(虚拟DOM树),并将VNode转换成真正DOM节点的过程)

记录--Vue的缓存组件 | 详解KeepAlive

1、在首次加载被包裹组件时,由keep-alive.js中的render函数可知,vnode.componentInstance的值是undfined,keepAlive的值是true,因为keep-alive组件作为父组件,它的render函数会先于被包裹组件执行;那么只执行到i(vnode,false),后面的逻辑不执行;

2、再次访问被包裹组件时,vnode.componentInstance的值就是已经缓存的组件实例,那么会执行insert(parentElm, vnode.elm, refElm)逻辑,这样就直接把上一次的DOM插入到父元素中。

记录--Vue的缓存组件 | 详解KeepAlive

三. keep-alive 的应用

记录--Vue的缓存组件 | 详解KeepAlive

下面是一个简单的例子,演示了如何使用 keep-alive 组件缓存一个计数器组件:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
    <button @click="reset">重置</button>
  </div>
</template>

<script>
export default {
  props: ['count'],
  methods: {
    increment() {
      this.$emit('increment')
    },
    decrement() {
      this.$emit('decrement')
    },
    reset() {
      this.$emit('reset')
    }
  }
}
</script>

父组件使用

<template>
  <div>
    <keep-alive>
      <counter :count="count" @increment="increment" @decrement="decrement" @reset="reset" />
    </keep-alive>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
    <button @click="reset">重置</button>
  </div>
</template>

<script>
import Counter from './Counter.vue'

export default {
  components: {
    Counter
  },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    },
    reset() {
      this.count = 0
    }
  }
}
</script>

在这个例子中,我们创建了一个计数器组件 Counter,并在父组件中使用 keep-alive 组件来缓存它。我们还定义了一个 count 数据属性,并将它传递给 Counter 组件作为一个 prop,用于展示当前的计数值。同时,我们还绑定了三个自定义事件 incrementdecrementreset,用于响应计数器的操作。

当我们点击增加或减少按钮时,Counter 组件的 count 属性会发生变化,但由于它被包裹在 keep-alive 组件中,所以实际上并没有被销毁。当我们再次渲染 Counter 组件时,它会从缓存中获取到之前的实例,并将其重新挂载到 DOM 上,这样就能够保留之前的状态。 在上面的例子中,我们可以看到在 keep-alive 组件中只包含了一个 Counter 组件。但是,在实际应用中,我们可能需要缓存多个不同的组件,这时我们可以通过 includeexclude 属性来指定要缓存或排除的组件。

例如,我们可以修改上面的例子,将 Counter 组件和另一个文本组件 Text 都缓存起来

<template>
  <div>
    <keep-alive :include="[Counter, Text]">
      <component :is="currentComponent" :count="count" v-on:increment="increment" v-on:decrement="decrement" v-on:reset="reset" />
    </keep-alive>
    <button @click="toggleComponent">切换</button>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
    <button @click="reset">重置</button>
  </div>
</template>

<script>
import Counter from './Counter.vue'
import Text from './Text.vue'

export default {
  components: {
    Counter,
    Text
  },
  data() {
    return {
      count: 0,
      currentComponent: 'Counter'
    }
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'Counter' ? 'Text' : 'Counter'
    },
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    },
    reset() {
      this.count = 0
    }
  }
}
</script>

在这个例子中,我们定义了一个 currentComponent 数据属性,用于动态切换要渲染的组件。我们还使用了 component 元素来动态渲染不同的组件。

keep-alive 组件中,我们使用了 include 属性来指定要缓存的组件。注意,这里传入的是一个数组,可以包含多个组件。

同时,我们还可以使用 exclude 属性来排除某些组件不进行缓存。例如,我们可以将 Text 组件排除在缓存之外,如下所示:

<keep-alive :include="[Counter]" :exclude="[Text]">
  <!-- 缓存 Counter 组件,排除 Text 组件 -->
</keep-alive>

总之,keep-alive 组件的作用是缓存动态组件或者组件的状态,避免重复渲染和销毁组件,从而提高应用的性能。在实际应用中,我们可以通过指定要缓存或排除的组件来灵活地控制组件的缓存策略,以满足不同的需求。

四. keep-alive 如何刷新

当使用 keep-alive 组件缓存一个组件时,如果需要在组件被缓存时执行一些操作,可以使用 activated 钩子函数,在组件被激活(被缓存并且被展示)时触发。如果需要在组件被缓存时清除一些数据或状态,可以使用 deactivated 钩子函数,在组件被停用(被缓存但不被展示)时触发。

如果需要强制重新渲染被缓存的组件,可以使用 this.$forceUpdate() 方法。在被缓存的组件中,可以将这个方法绑定到一个按钮上,当按钮被点击时,被缓存的组件会强制重新渲染。

需要注意的是,使用 this.$forceUpdate() 方法会重新渲染整个组件,包括不在 keep-alive 组件中的部分,因此需要谨慎使用,以免影响应用的性能。

除了使用 this.$forceUpdate() 方法强制重新渲染组件外,还可以使用 includeexclude 属性来控制哪些组件应该被缓存或不被缓存。当我们需要更新一个被缓存的组件时,可以将它从缓存中排除,并在需要更新时再重新包含到缓存中。这样可以避免无谓的重复渲染,提高应用的性能。

综上所述,我们可以通过使用 activateddeactivated 钩子函数、this.$forceUpdate() 方法以及 includeexclude 属性来控制被缓存的组件的刷新策略,以满足不同的需求。

五. keep-alive 页面缓存思路

功能需求描述:

  1. 页面前进刷新,后退不刷新
  2. 动态配置可缓存的页面
  3. 手动刷新已缓存的页面

实现思路:动态include配置缓存组件,路由拦截判断当前跳转路由是否配置可缓存

<template>
  <keep-alive :include="cachedViews" :exclude="excludeViews">
    <router-view></router-view>
  </keep-alive>
</template>

动态操作include绑定值store状态管理:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        cachedViews: [],
        excludeViews: []
    },
    mutations: {
        ADD_CACHED_VIEW: (state, payload) => {
          if (state.cachedViews.includes(payload)) return
          state.cachedViews.push(payload)
        },
        DEL_CACHED_VIEW: (state, payload) => {
          const index = state.cachedViews.indexOf(payload)
          index > -1 && state.cachedViews.splice(index, 1)
        }
    },
    actions: {
        ADD_CACHED_VIEW({ commit, }, payload) {
          commit('ADD_CACHED_VIEW', payload)
        },
        DEL_CACHED_VIEW({ commit, }, payload) {
          commit('DEL_CACHED_VIEW', payload)
        }
    }
})

export default store

在路由拦截器中实现逻辑:

1.路由导航进入时,如果配置了缓存,则记录状态,并实现缓存页面

2.路由离开时,删除缓存标识

import store from '@/store'

router.beforeEach((to, from, next) => {
   if (to.meta.keepAlive) {
     store.dispatch('ADD_CACHED_VIEW', to.name)
   }
})
<script>
export default {
  name: "B",
  beforeRouteLeave(to, from, next) {
    if (to.name != "C") {
      this.$store.dispatch('DEL_CACHED_VIEW', to.name)
    }
    next();
  },
  methods: {
  }
};
</script>

本文转载于:

https://juejin.cn/post/7270160291413016628

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 记录--Vue的缓存组件 | 详解KeepAlive文章来源地址https://www.toymoban.com/news/detail-702658.html

到了这里,关于记录--Vue的缓存组件 | 详解KeepAlive的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue缓存路由组件

    作用:让不展示的路由组件保持挂载,不被销毁

    2024年02月12日
    浏览(36)
  • 编程式导航、缓存路由组件、路由守卫、Vue UI组件库【VUE】

    作用:不借助 router-link 实现路由跳转,让路由跳转更加灵活 具体编码: 作用:让不展示的路由组件保持挂载,不被销毁 具体编码: 作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态。 具体名字: (1)activated路由组件被激活时触发 (2)deactivated路由组件失

    2024年02月03日
    浏览(50)
  • Vue Router 路由动态缓存组件

    Vue Router 允许你缓存路由组件,这样在用户导航回之前的页面时,组件的状态会被保留而不是重新渲染。这可以通过使用 keep-alive 组件来实现。 keep-alive 是一个内置抽象组件,它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。 它的主要作用是缓存不活动的组件实例,

    2024年04月16日
    浏览(35)
  • Vue-组件缓存-keep-alive

    在Vue.js中,组件的复用和缓存是一个重要的优化手段。当我们频繁切换组件时,频繁的销毁和重建会带来一定的性能开销。为了解决这个问题,Vue提供了一个名为 keep-alive 的抽象组件。下面我们将深入探讨 keep-alive 的工作原理、使用场景和最佳实践。 keep-alive是什么 keep-aliv

    2024年01月16日
    浏览(43)
  • 【Vue3】keep-alive 缓存组件

    当在 Vue.js 中使用 keep-alive 组件时,它将会缓存动态组件,而不是每次渲染都销毁和重新创建它们。这对于需要在组件间快速切换并且保持组件状态的情况非常有用。 keep-alive 只能包含(或者说只能渲染)一个子组件,如果需要包含多个子组件,需要用 v-if 选择某个确定的组

    2024年02月13日
    浏览(41)
  • 【vue3】10-vue组件化额外知识补充(下)-动态组件-组件缓存-v-model在组件上的应用

    切换组件案例: 比如我们现在想要实现了一个功能: 点击一个tab-bar,切换不同的组件显示; 这个案例我们可以通过两种不同的实现思路来实现: 方式一 :通过v-if来判断,显示不同的组件; 方式二 :动态组件的方式; 方式一代码示例: 动态组件方式实现 动态组件是使用 component组

    2024年02月08日
    浏览(66)
  • Vue使用keep-alive设置哪些组件可以被缓存,哪些不被缓存

    需求:当一个项目中,不是所有的组件页面都需要缓存起来,因为有些页面是不需要的    $route.meta.keepAlive 判断当前组件是否有keepAlive属性 在路由js文件中在配置路由规则的时候配置  

    2024年02月16日
    浏览(39)
  • Vue中的keep-alive缓存组件的理解

    keep-alive 是一个抽象组件,用于将其内部的组件保留在内存中,而不会重新渲染。这意味着当组件在keep-alive 内部切换时,其状态将被 保留 ,而不是被销毁和重新创建。          keep-alive用来缓存不经常变化的组件,以提高性能,当我们在不同路由之间进行切换或者是动

    2024年01月18日
    浏览(38)
  • Vue-Html5-Video组件视频缓存本地技术

    Vue.js本身并不提供将视频缓存到本地的功能,但是可以通过使用HTML5的video标签和浏览器提供的缓存机制来实现。 具体实现步骤如下: 1. 在Vue组件中使用video标签来加载视频,如下所示: ```html video ref=\\\"videoPlayer\\\" controls source :src=\\\"videoUrl\\\" type=\\\"video/mp4\\\" /video ``` 其中,videoUrl是视频

    2024年02月16日
    浏览(49)
  • Vue.js 进阶技巧:keep-alive 缓存组件解析

    🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_ CSDN 博客专家、23年度博客之星前端领域TOP1 🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你

    2024年03月11日
    浏览(85)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包