keep-alive能不能缓存页面组件的位置呢

Question

keep-alive能不能缓存页面组件的位置呢，就比如切换路由的适合或者切换组件的适合，能不能把上个页面的滚动位置也缓存下来呢，我记得之前是可以的，现在好像不行，如果可以的话该怎么缓存呢，如果不行的话，是为什么呢，如果不行的话，那他缓存的是数据是吗

Answer 1

其实在官方文档中，已经说明了keep-alive的作用：

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

因为组件实例拥有$el属性指向DOM，所以也会使得相应的DOM不会得到释放，从而缓存DOM。

滚动位置

浏览器滚动条的滚动距离是由浏览器内部所控制和记录的。
当DOM从文档中被移除后再重新插入文档时，浏览器会重新渲染相应视图部分。而浏览器只关心当前的文档模型，是不会记录之前的变动的。因此，与滚动相关的记录将丢失。
在重新导航时，浏览器为了防止长时间的白屏，会对每个页面离开时的状态进行缓存，并在重新导航后试图更新缓存的页面。但这仅是浏览器为了防止白屏做的优化行为，而且只能在页面导航切换时会被应用。在单页面应用中是不会发生的。
在vue-router中，为了模拟浏览器的这一行为，专门提供了设置路由切换后滚动位置的方法。但与浏览器的行为不同，浏览器是直接读取缓存，即使在无网络环境下仍然可以渲染；但vue-router只是模拟滚动位置，在无网络环境下，可能无法正常渲染。
对于vue的组件片段，在通常情况下是无法记录滚动距离的，除非自行模拟实现。