本篇文章主要介绍了vue项目优化之通过keep-alive数据缓存的方法，内容挺不错的，现在分享给大家，也给大家做个参考。
prop:
include: 字符串或正则表达式。只有匹配的组件会被缓存。
exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。
通过vue提供的keep-alive减少对服务器的请求次数
VUE2.0中提供了一个keep-alive方法，可以用来缓存组件，避免多次加载相应的组件，减少性能的消耗。比如， 一个页面的数据包括图片、文字等用户都已经加载完了，然后用户通过点击跳转到了另外一个界面。然后从另外一个界面通过返回又回到了原先的界面。如果没有设置的话，那么原先界面的信息就要重新向服务器请求得到。而通过vue提供的keep-alive可以是页面的已经请求的数据得以保存，减少请求的次数，提高用户的体验程度。
缓存组件又分为两种，缓存整个站点的页面的组件或者缓存部分页面的组件。
1、缓存所有的页面,适用于每个页面都有请求的情况。方法如下，在需要缓存的router-view用keep-alive标签进行包裹起来。
<keep-alive> <router-view></router-view> </keep-alive>
将首次触发请求写到created钩子里边，就能实现缓存。比如从列表页，去了详情页，回来还是原来的页面。
2、缓存部分组件或者页面，使用router.meta这个属性通过判断的方法可以实现。方法如下：
<keep-alive v-if="$route.meta.keepAlive"> <router-view></router-view> </keep-alive> <router-view v-if="! $route.meta.keepAlive"> </router-view>
router设置如下：
routers:[
{ path: '/home',
name: home,
meta:{keepAlive: true} // 设置为true表示需要缓存，不设置或者false表示不需要缓存 }
]还可以通过新增的属性include/exclude来设置。见名思意，include包含的意思，exclude除了的意思。这里需要用到组件的名称即name来进行设置，所以name肯定就要加上了。 加入 a,b组件需要缓存，c,d组件不需要缓存。写法如下：
<keep-alive include="a,b"> <component></component> </keep-alive> <keep-alive exclude="c,d"> <component></component> </keep-alive>
vue项目的优化还可以通过组件的按需加载来实现，就像图片的懒加载一样，如果客户根本就没有看到那些图片，而我们却在打开页面的时候全部给加载完了，这样会大大的增加请求的时间，降低用户的体验程度。懒加载在很多的网站都有用到，比如淘宝、京东等等这样的购物网站，上面的图片链接等等都很多，如果你把滚轴迅速的往下拉的时候，你可能会看到图片加载的情况。具体怎么使用，大家可以看另一篇文章: vue项目优化之页面的按需加载(vue+webpack)
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
以上是vue的项目优化之通过keep-alive数据缓存的方法的详细内容。更多信息请关注PHP中文网其他相关文章！
