vue中keep-alive缓存的使用

最新推荐文章于 2025-04-21 18:29:05 发布

Wyyyy1024

最新推荐文章于 2025-04-21 18:29:05 发布

阅读量478

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/weixin_44389562/article/details/111872860

版权

Vue 专栏收录该内容

19 篇文章

订阅专栏

keep-alive是什么？

<keep-alive /> 是一个vue中内置组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。使用<keep-alive />包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

应用场景

在一个项目中，当我们主页跳转到列表页在从列表页跳转到详情页，我们希望我们点击过的每一个列表再次点击不需要重新发送请求，这时我们需要将页面的数据缓存下来，以保证下次不在重新发起请求，获取数据。所以我们借助vue中<keep-alive />组件用来缓存这个组件

基本使用

首先在组件被<keep-alive />所包裹，被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated ，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。主要用于保留组件状态或避免重新渲染

activated

被 keep-alive 缓存的组件激活时调用
该钩子在服务器端渲染期间不被调用

deactivated

被 keep-alive 缓存的组件停用时调用
该钩子在服务器端渲染期间不被调用

props属性

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

<!-- 最基础的用法： 直接用标签是缓存被包裹的组件 -->
<keep-alive>
  <Article-list></Article-list>
</keep-alive>

在vue项目中APP.vue中

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

匹配首先你的组件必须有name属性 include=“你的组件的name的名字”

v-bind:include=' ' / :include=' '动态绑定里也可以是正则表达式或数组

<template>
  <div id="app">
<!-- 路由出口 -->
<!-- 需要缓存 -->
<keep-alive include="home">
 <router-view></router-view>
 </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>
<style lang="less">
</style>

动态组件上使用`<keep-alive />`

当只有一个html页面，我们点击不同的组件会跳转不同的链接，当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./lib/vue-2.6.12.js"></script>
  </head>
  <body>
    <div id="app">
      <a href="#/zhuye">主页</a>
      <a href="#/keji">科技</a>
      <a href="#/caijing">财经</a>
      <a href="#/yule">娱乐</a>
			<keep-alive>
      <component :is="currentName"></component>
      </keep-alive>
    </div>

    <script>
      // 主页组件
      const zhuye = {
        template: "<h1>主页信息</h1>",
      };

      // 科技组件
      const keji = {
        template: "<h1>科技信息</h1>",
      };

      // 财经组件
      const caijing = {
        template: "<h1>财经信息</h1>",
      };

      // 娱乐组件
      const yule = {
        template: "<h1>娱乐信息</h1>",
      };
      let options = {
        el: "#app",
        data: {
          currentName: "zhuye",
        },
        components: {
          zhuye,
          keji,
          caijing,
          yule,
        },
      };
      var vm = new Vue(options);
      window.onhashchange = function () {
        //   console.log();
        let hash = location.hash.slice(2);
        switch (hash) {
          case "zhuye":
            vm.currentName = "zhuye";
            break;
          case "keji":
            vm.currentName = "keji";
            break;
          case "caijing":
            vm.currentName = "caijing";
            break;
          case "yule":
            vm.currentName = "yule";
            break;
        }
      };
    </script>
  </body>
</html>