前端技巧：用Keep-Alive缓存当前列表页，记录页面滚动位置

2023-12-06 09:18:46

在日常的前端开发中，我们会经常遇到一些需要在列表页中缓存数据的情况。例如，在电商网站上，我们可能会遇到这样的需求：用户在一个列表页中选择了某些商品，然后点击了其他的页面，又返回到该列表页。这时候，我们希望能够将用户之前选择过的商品信息缓存起来，这样当用户返回到该列表页时，这些商品信息就可以直接显示出来，而无需重新加载。

为了实现这个需求，我们可以使用Vue.js中的Keep-Alive组件。Keep-Alive组件可以将一个组件及其子组件缓存起来，并在组件被销毁时将其状态保存起来。当组件再次被创建时，其状态将被恢复，从而实现缓存的效果。

Keep-Alive用法

keep-alive 缓存当前页面的子组件，同时记住当前组件的状态，当返回到该页面时，可以直接展示；

我们可以在代码中使用<keep-alive>标签将需要缓存的组件包裹起来。例如：

<template>
  <keep-alive>
    <List/>
  </keep-alive>
</template>

<script>
import List from './List.vue'

export default {
  components: { List }
}
</script>

在上面的代码中，我们使用<keep-alive>标签将List组件包裹起来。这样，当List组件被销毁时，其状态将被保存起来。当用户再次返回到该页面时，List组件将被重新创建，并且其状态将被恢复，从而实现缓存的效果。

Keep-Alive记录滚动位置

为了在用户返回页面时能够继续从上次离开的位置继续浏览，我们需要记录该页面的滚动位置。我们可以使用Vue.js中的window.scrollY属性来获取页面的滚动位置。例如：

mounted() {
  window.scrollTo(0, this.scrollTop)
},

beforeDestroy() {
  this.scrollTop = window.scrollY
}

在上面的代码中，我们在组件的mounted()钩子函数中将页面的滚动位置设置为this.scrollTop。在组件的beforeDestroy()钩子函数中，我们将this.scrollTop的值设置为页面的滚动位置。这样，当组件被销毁时，页面的滚动位置将被保存起来。当组件再次被创建时，页面将被滚动到this.scrollTop的位置，从而实现记录滚动位置的效果。