文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue的keep-alive怎么正确使用

2024-04-02 19:55

关注

这篇文章主要讲解了“vue的keep-alive怎么正确使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue的keep-alive怎么正确使用”吧!

  先来看一个项目中的需求

  作为苦逼的前端开发者,我们无时无刻都要面对产品经理提的各种需求, 比如这个场景

  场景:

  从首页的点击导航进入列表页,

  列表页点击列表进入 该 数据详情页

  从详情页返回,希望列表页缓存,不重新渲染数据,这样会提高用户体验。

  分析一下

  这样需求,如果是小程序的话,默认列表页就会缓存,因为小程序的运行环境是微信客户端,当我们打开一个页面会新建一个webview,

  所有列表页和详情页是两个webview,当我们进入详情页,列表页webview,只是会在详情页webview下面,不会销毁。

  以下是小程序运行环境:我们可以看到每个页面都有一个webview

  但是但是,我们的项目是用vue开发的webapp,多个组件共用一个窗口,当我们切换路由时,切出路由组件会销毁,所有列表页进入详情页列表页会销毁,重新回到列表页,列表页组件会重新加载。

  解决方案

  睡服提需求的人,改个简单的需求

  emm... ,看了看镜子中的自己,估计这辈子没办法从脸上得到任何的便利了,老老实实换个方案吧。

  keep-alive

  keep-alive是Vue提供的一个抽象组件,主要用于保留组件状态或避免重新渲染。

  <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁他们。

  和<transition> 相似, <keep-alive> 是一个抽象组件,它自身不会渲染一个DOM元素,也不会出现在父组件链中。

  但是 keep-alive 会把其包裹的所有组件都缓存起来。

  em...怎么办呢,我们只是需要让列表页缓存啊.

  分析一下

  我们可以把需求拆分为2步

  (1) 把需要缓存和不需要缓存的组件区分开,在组件的路由配置的元信息,meta中定义哪些需要缓存哪些不需要缓存

  具体代码如下

  1,定义两个出口 router-view

  <keep-alive>

  <!-- 需要缓存的视图组件 -->

  <router-view v-if="$route.meta.keepAlive">

  </router-view>

  </keep-alive>

  <!-- 不需要缓存的视图组件 -->

  <router-view v-if="!$route.meta.keepAlive">

  </router-view>

  2,在router配置中定义哪些需要缓存哪些不需要缓存

  new Router({

  routes: [

  {

  path: '/',

  name: 'index',

  component: () => import('./views/keep-alive/index.vue')

  },

  {

  path: '/list',

  name: 'list',

  component: () => import('./views/keep-alive/list.vue'),

  meta: {

  keepAlive: true //需要被缓存

  }

  },

  {

  path: '/detail',

  name: 'detail',

  component: () => import('./views/keep-alive/detail.vue')

  }

  ]

  })

  (2),开始按需缓存组件

  我们从官方文档提供的 api 入手,

  keep-alive组件如果设置了 include ,就只有和 include 匹配的组件会被缓存,

  所以思路就是,动态修改 include 数组来实现按需缓存。

  <template>

  <keep-alive :include="include">

  <!-- 需要缓存的视图组件 -->

  <router-view v-if="$route.meta.keepAlive">

  </router-view>

  </keep-alive>

  <!-- 不需要缓存的视图组件 -->

  <router-view v-if="!$route.meta.keepAlive">

  </router-view>

  </template>

  <script>

  export default {

  name: "app",

  data: () => ({

  include: []

  }),

  watch: {

  $route(to, from) {

  //如果 要 to(进入) 的页面是需要 keepAlive 缓存的,把 name push 进 include数组

  if (to.meta.keepAlive) {

  !this.include.includes(to.name) && this.include.push(to.name);

  }

  }

  }

  };

  </script>

  此时我们发现,从详情页返回列表页,列表页真的不再刷新了

  em...新的问题又出现了,由于 列表页被缓存了,这个时候我从首页,再点击进入某个列表,也不刷新了,完了,点击首页导航应该进入不同的列表页的. 也就是说,从首页进入列表组件不应该被缓存的。

  解决一下,我们在定义路由是,在元信息中再加一个字段,这里是deepth字段,代表进入路由的层级,比如首页路由deepth是0.5,列表页是1,详情页是2

  new Router({

  routes: [

  {

  path: '/',

  name: 'index',

  component: () => import('./views/keep-alive/index.vue'),

  meta: {

  deepth: 0.5 // 定义路由的层级

  }

  },

  {

  path: '/list',

  name: 'list',

  component: () => import('./views/keep-alive/list.vue'),

  meta: {

  deepth: 1

  keepAlive: true //需要被缓存

  }

  },

  {

  path: '/detail',

  name: 'detail',

  component: () => import('./views/keep-alive/detail.vue'),

  meta: {

  deepth: 2

  }

  }

  ]

  })

  然后在 app.vue中增加监听器,监听 我们进入路由的 方向

  具体代码如下

  <template>

  <keep-alive :include="include">

  <!-- 需要缓存的视图组件 -->

  <router-view v-if="$route.meta.keepAlive">

  </router-view>

  </keep-alive>

  <!-- 不需要缓存的视图组件 -->

  <router-view v-if="!$route.meta.keepAlive">

  </router-view>

  </template>

  <script>

  export default {

  name: "app",

  data: () => ({

  include: []

  }),

  watch: {

  $route(to, from) {

  //如果 要 to(进入) 的页面是需要 keepAlive 缓存的,把 name push 进 include数组

  if (to.meta.keepAlive) {

  !this.include.includes(to.name) && this.include.push(to.name);

  }

  //如果 要 form(离开) 的页面是 keepAlive缓存的,

  //再根据 deepth 来判断是前进还是后退

  //如果是后退

  if (from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {

  var index = this.include.indexOf(from.name);

  index !== -1 && this.include.splice(index, 1);

  }

  }

  }

  };

  </script>

感谢各位的阅读,以上就是“vue的keep-alive怎么正确使用”的内容了,经过本文的学习后,相信大家对vue的keep-alive怎么正确使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯