• Home
  • home > webfront > ECMAS > vue >

    vue router keep-alive 保证回退页面不刷新

    Author：zhoulujun Date：

    从a页面跳到b页面进行编辑，编辑完再返回a页面，却没走a页面的钩子函数mounted，数据没有更新。解决这个问题的关键就在于对keep-alive的理解和activated钩子函数的使用。

    keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM；

    keep-alive 的props

    • include - 字符串或正则表达，只有匹配的组件会被缓存

    • exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

    缓存组件

    <keep-alive>
 <component include="a" exclude="b">
  <!-- name 为 a 的组件将被缓存！,name 为 b 的组件不被缓存！ -->
 </component>
</keep-alive>

    缓存路由

    <keep-alive include="a">
  <router-view>
    <!-- 只有路径匹配到的视图 a 组件会被缓存！ -->
  </router-view>
</keep-alive>

    推荐用法：不需要例举出需要被缓存组件名称

    <keep-alive>
  <router-view v-if="$route.meta.keepAlive">
    <!-- 这里是会被缓存的视图组件，比如 Home！ -->
  </router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
  <!-- 这里是不被缓存的视图组件，比如 Edit！ -->
</router-view>

    但是，他们也阻挡了vue 正常的生命周期流程。

    vue的生命周期有：beforeCreate,created,beforeMonted,mounted.beforUpdate,update,beforDestroy,destroyed，详情参看《vue2.x入坑总结—回顾对比angularJS/React》

    当在这些组件之间切换的时候都会请求一些请求过的数据，每次请求都会导致重复渲染影响性能。这些数据可以存到缓存。此时使用keep-alive将组建包裹起来。但这样以上八种生命周期钩子将失效。

    取而代之的时activate和deactivated

    • activate：是在被包裹组建被激活的状态下使用的生命周期钩子

    • deactivated：在被包裹组件停止使用时调用

    理论上：当在项目中引入keep-alive的时候，

    • 页面第一次进入，钩子函数的触发顺序created -> mounted -> activated，

    • 退出时触发deactivated。

    • 再次进入（前进或者后退）时，只触发activated。如果created或mounted中处理刷新页面，这个钩子没有被调用，无法刷新。

    beforeRouteEnter 总会触发

    • 不使用 keep-alive 时，

      beforeRouteEnter --> created --> mounted --> destroyed

    • 使用 keep-alive 时，

      beforeRouteEnter --> created --> mounted --> activated --> deactivated

    更多的坑，推荐看《Vue 爬坑之旅 -- keepAlive 与 vue-router 结合使用实现页面缓存及记住滚动位置功能的实现及几个需要注意的点》

    keep-live需要注意的地方总结

    • 先匹配被包含组件的 name 字段，如果 name 不可用，则匹配当前组件 components 配置中的注册名称。 

    • 不会在函数式组件中正常工作，因为它们没有缓存实例。 

    • 当匹配条件同时在 include 与 exclude 存在时，以 exclude 优先级最高(当前vue 2.4.2 version)。比如：包含于排除同时匹配到了组件A，那组件A不会被缓存。 

    • 包含在include中，但符合 exclude ，不会调用activated 和 deactivated。


    参考文章：

    vue学习---生命周期钩子activated，deactivated https://www.cnblogs.com/mengtong/p/10966955.html

    vue 页面回退mounted函数不执行的问题及解决方法 https://www.cnblogs.com/candy-xia/p/11425357.html

    深入理解vue-router之keep-alive https://www.jb51.net/article/122570.htm

    官方：<keep-alive>组件缓存问题 #811 https://github.com/vuejs/vue-router/issues/811#issuecomment-353875880


    转载本站文章《vue router keep-alive 保证回退页面不刷新》,
    请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue/8236.html

    收藏
    上一篇：vue mixins、Vue.extend() 、extends使用注意事项笔记
    下一篇：详解v-model：v-model双向绑定与Vue自定义组件设置
    延伸阅读：