vue开发之keep-alive_lihuanan123的博客-CSDN博客

来自 : CSDN技术社区 发布时间：2021-03-24

概念

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

作用

  在组件切换过程中将状态保留在内存中 防止重复渲染DOM 减少加载时间及性能消耗 提高用户体验性

原理

  在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中 在 render 页面渲染 时 如果 VNode 的 name 符合缓存条件 可以用 include 以及 exclude 控制 则会从 this.cache 中取出之前缓存的 VNode 实例进行渲染。

  VNode 虚拟DOM 其实就是一个JS对象

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

 1. activated
  在 keep-alive 组件激活时调用
  该钩子函数在服务器端渲染期间不被调用

 2. deactivated
  在 keep-alive 组件停用时调用
  该钩子在服务器端渲染期间不被调用

  被包含在 keep-alive 中创建的组件 会多出两个生命周期的钩子: activated 与 deactivated

  使用 keep-alive 会将数据保留在内存中 如果要在每次进入页面的时候获取最新的数据 需要在 activated 阶段获取数据 承担原来 created 钩子函数中获取数据的任务。

  注意  只有组件被 keep-alive 包裹时 这两个生命周期函数才会被调用 如果作为正常组件使用 是不会被调用的 以及在 2.1.0 版本之后 使用 exclude 排除之后 就算被包裹在 keep-alive 中 这两个钩子函数依然不会被调用 另外 在服务端渲染时 此钩子函数也不会被调用。

缓存所有页面

      1. 在 App.vue 里面

 template div id app keep-alive router-view/ /keep-alive /div /template script export default { name: App } /script 

根据条件缓存页面

  1. 在 App.vue 里面

 template div id app // 1. 将缓存 name 为 test 的组件 keep-alive include test router-view/ /keep-alive // 2. 将缓存 name 为 a 或者 b 的组件 结合动态组件使用 keep-alive include a,b router-view/ /keep-alive // 3. 使用正则表达式 需使用 v-bind keep-alive :include /a|b/ router-view/ /keep-alive // 5.动态判断 keep-alive :include includedComponents router-view/ /keep-alive // 5. 将不缓存 name 为 test 的组件 keep-alive exclude test router-view/ /keep-alive /div /template script export default { name: App } /script 

结合Router 缓存部分页面

  1. 在 router 目录下的 index.js 文件里

import Vue from vue import Router from vue-router const Home resolve require([ /components/home/home ], resolve)const Goods resolve require([ /components/home/goods ], resolve)const Ratings resolve require([ /components/home/ratings ], resolve)const Seller resolve require([ /components/home/seller ], resolve)Vue.use(Router)export default new Router({ mode: history , routes: [ { path: / , name: home , component: Home, redirect: goods , children: [ { path: goods , name: goods , component: Goods, meta: { keepAlive: false // 不需要缓存 } }, { path: ratings , name: ratings , component: Ratings, meta: { keepAlive: true // 需要缓存 } }, { path: seller , name: seller , component: Seller, meta: { keepAlive: true // 需要缓存 } } ] } ]})

  2. 在 App.vue 里面

 template div id app keep-alive router-view v-if $route.meta.keepAlive /router-view /keep-alive router-view v-if !$route.meta.keepAlive /router-view /div /template script export default { name: App } /script 

使用 router.meta 拓展

  假设这里有 3 个路由 A、B、C。

  需求
    默认显示 A
    B 跳到 A A 不刷新
    C 跳到 A A 刷新

  实现方式
  1. 在 A 路由里面设置 meta 属性

{ path: / , name: A , component: A, meta: { keepAlive: true // 需要被缓存 }}

  2. 在 B 组件里面设置 beforeRouteLeave

export default { data() { return {}; }, methods: {}, beforeRouteLeave(to, from, next) { // 设置下一个路由的 meta to.meta.keepAlive true; // 让 A 缓存 即不刷新 next(); }};

  3. 在 C 组件里面设置 beforeRouteLeave

export default { data() { return {}; }, methods: {}, beforeRouteLeave(to, from, next) { // 设置下一个路由的 meta to.meta.keepAlive false; // 让 A 不缓存 即刷新 next(); }};

  这样便能实现 B 回到 A A 不刷新 而 C 回到 A 则刷新。

2.5.0 版本新增max

  最多可以缓存多少组件实例。一旦这个数字达到了 在新实例被创建之前 已缓存组件中最久没有被访问的实例会被销毁掉。

 keep-alive :max 10 component :is view /component /keep-alive 

注意

  注意这个 keep-alive 要求被切换到的组件都有自己的名字 不论是通过组件的 name 选项还是局部/全局注册。

点赞 评论