浅谈vue中的组件缓存| 8月更文挑战__Vue.js__前端
发布于 1 个月前 作者 banyungong 211 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

theme: condensed-night-purple

前言:借着八月活动夯实下vue基本功,八月第一篇文章,从vue中的组件缓存开始。

什么情况下要有组件缓存?

情况:当我们在掘金里浏览文章,就比如各位掘友们打开我的这篇文章,不管是推荐还是精选或者是关注等模块,看文章时手滑,误点返回,主页却重新加载,刚刚的模块就被记忆清除,这是因为路由的跳转,会导致组件的销毁和重建(比如/detail 跳转到/home,/detail被销毁,/home创建)。这样对用户的体验感差了许多,所以良好的用户体验就是点击返回,依旧回到刚才的模块。
优化: 通过keep-alive组件来进行对组件进行缓存。

什么是组件缓存?

如果对对组件进行了缓存, 就是 一旦组件被创建 , 那么就不会在切换组件时被销毁。 代码实现其实非常简单,就是用keep-alive标签包下路由出口标签。

<keep-alive>
 <router-view ></router-view>
</keep-alive>

上面那样有没有什么问题?

问题1:如果缓存的组件过多,或者是把不必要的组件也缓存了,会造成内存占用过多。
问题2:会导致需要更新的却被缓存了,如detail组件被缓存就不会更新了。

策略:把那些重要,高频的(如主页),或者是不怎么变化的组件缓存下来。

解决:给要缓存的路由做个标记,然后在载入路由时,动态决定是否要缓存。更加精确控制要缓存的组件

组件缓存的优化写法:

在定义路由时,额外添加路由[元信息],来补充一些信息要素。

{ 
  path: '/', 
  component: () => import('../views/home/index.vue'), 
  //是否缓存
  meta: { isKeepAlive: true } 
},

在app.vue中根据meta元信息来决定是否缓存组件

<div id="app">
  <keep-alive>
    <router-view v-if="$route.meta.isKeepAlive"/>
  </keep-alive>
  <router-view v-if="!$route.meta.isKeepAlive"/>
</div>

END

业精于勤,荒于嬉;行成于思,毁于随。八月,各位加油哦。

以上是这次Vue组件缓存相关的所有内容

如有问题,欢迎留言告知,感谢~

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: Panda_Loncon 原文链接:https://juejin.im/post/6991404517518966820

回到顶部