浅谈vue中的组件缓存| 8月更文挑战__Vue.js__前端
粉丝福利 : 关注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