Vue-router中keep-alive的理解

1、什么是keep-alive

       keep-alive用来缓存组件,避免多次加载相应的组件,减少性能消耗，简单一点来说就是从页面1链接到其他页面后回退到页面1不用在重新执行页面1的代码，只会从缓存中加载之前已经缓存的页面1，这样可以减少加载时间及性能消耗，提高用户体验性。

2、keep-alive的作用是什么

       通过设置了keep-alive，可以简单理解为从页面1跳转到页面2后，然后后退到页面1，只会加载缓存中之前已经渲染好的页面1，而不会再次重新加载页面1，及不会再触发页面一种的created等类似的钩子函数，除非自己重新刷新该页面1。

例如我的页面1有如下代码，该代码具体作用是每请求一次页面1，会获取一些数据追加到原来的数组里，然后再渲染该数组中的数据

当使用了keep-alive后，无论从页面1链接到其他页面再回退到页面1多少次，页面1还是只有2个数据，因为并没有再次触发created钩子函数，只会从缓存中加载页面1，这就是keep-alive的作用之处。

3、什么时候用keep-alive

如果需要频繁切换路由，这个时候就可以考虑用keep-alive了，来达到避免数据的重复请求的目的。

4、怎么用keep-alive

<keep-alive>

    <router-view> </router-view>

</keep-alive>

将首次触发请求写在created钩子函数中,就能实现缓存,

如果你需要缓存部分页面或者组件，可以使用如下方法：

(1)、使用router. meta属性

 

           表示test1都使用keep-alive，test2不使用

(2)、使用新增属性inlcude/exclude

同时必须在test1组件js部分添加name: 'test1'

表示除了test1，其他都使用keep-alive

其中，也可动态设置，如下图

这个时候只要动态改变Components就可以设置哪个组件不使用keep-alive。

 

谢谢阅读！

                                        美好的明天会感谢今天努力的自己！