“我正在参加「掘金·启航计划」”

vue中,我们使用keep-alive内置组件，用来缓存组件，作用是将组件缓存在内从当中，防止重复渲染DOM,避免多次加载相同的组件，减少性能消耗，提高用户体验。现有vue2.x和vue3.x，这两个有使用上的部分差别，下面是介绍eepalive在这两个中的使用方法。

什么场景需要使用

场景一

当我们在一个列表滚动加载更多页面，或者有表格分页页面的时候，点击需要需要跳转到一个详情页面，点击返回，回到之前浏览的位置，并且数据不重载。

场景二

在一个有状态的列表页面，我们需要点击进入详情页面，操作一个状态，返回后，浏览的位置保持之前浏览的位置，其他的数据不重载，只更新某个状态。

场景一和场景二，这两个在某些电商网站经常用到，所以是比较常见的需求功能。

Vue2中

第一步：在App.vue中使用keep-alive标签,通过v-if判断，当前路由页面是否需要缓存。

<keep-alive>
      <router-view v-if="$route.meta.keepAlive " />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

第二步:在router.js中配置meta

{
   path: '/list',
   name: 'List',
   meta: {
      keepAlive:true
   },
},

通过以上两步，即可实现在vue2.x中缓存组件，并保持上一步的浏览位置，如需要局部数据刷新，需要使用到一个生命周期activated

activated(){
    //请求需要更新的接口数据
}

Vue3中

第一步：照常在App.vue中使用keep-alive标签，但是这里写法，和vue2.x相比，有些许区别请注意。 另外，如果使用到二级路由的话，这个需要使用在二级路由的页面，不能放在App.vue当中，否则没有效果

<router-view v-slot="{ Component }">
          <keep-alive :include="cacheList">
              <component :is="Component"  />
          </keep-alive>
  </router-view>
  
// 从 store中获取需要缓存的页面
<script lang="ts" setup>
  import { computed } from 'vue';
  import { useAppStore } from '@/stores';
  const tabBarStore = useAppStore();
  const cacheList = computed(() => tabBarStore.getCacheList);
</script>

第二步：在router.js中配置meta

{
  path: '/list',
  name: 'List',
  meta: {
     keepAlive:true
  },
},

第三步：在list的页面做如下处理

//页面卸载给store中保存一个cacheStore 判断是跳转到当前页面的详情页的name
onBeforeRouteLeave((to, from) => {
  if (to.name == 'Show') cacheStore.updateTabList(from)
  else {
    cacheStore.deleteTag(from.name)
  }
})

在setup 后面在添加一个name

<script lang="ts">
export default {
  name: 'List',
}
</script>

第四步：在router.js中配置scrollBehavior 配置这个就可以实现后退，回到之前浏览器滚动所在的位置，目前我是这么处理的，如果有其他更好的方式，希望XDM给我留言。

在vue2.x中可以省略这一步，vue2.x使用keep-alive,后退，就是在之前浏览的位置无需其他处理

scrollBehavior(to, from, savedPosition) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (savedPosition) {
          resolve(savedPosition)
        } else {
          if (from.meta.keepAlive) {
            from.meta.savedPosition = document.documentElement.scrollTop
          }
          resolve( { left: 0, top: to.meta.savedPosition || 0 })
        }
        
      }, 100)
    })
    
    
  },

总结：

在vue2.x和vue3.x大家都有不同的开发习惯，和开发规范，但是大同小异，找到一个适合自己的，才是提高开发效率的最终目的。在工作中我也是自己慢慢摸索，然后看一下大神的封装后台框架，学习他们的思路，之后形成自己最终现实项目中的方式。