vue中 keep-alive 缓存页面

keep-alive 基础知识

前往官网API学习了解 keep-alive

keep-alive 原理了解

keep-alive 原理了解

模拟应用场景

任务页面，点击查看其详情，返回的时候，保留之前的数据页面(以及自动定位到刚才浏览的位置)

使用方式

<!--基本使用 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

<!-- 和 `<transition>` 一起使用 (keep-alive 需紧贴包裹动态组件) -->
<transition>
  <keep-alive>
     <router-view />
  </keep-alive>
</transition>

使用细节

• keep-alive 属性 include和exclude 的 name是组件的 name属性，不是router中设置的name
• keep-alive 针对 router-view 时，正常使用 $router的 push / go 方式 就行
• keep-alive 新增的3个属性,没有必要再使用以往的操作方式

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

浏览器安装并使用 vueTools 调试工具调试查看，更方便理解
可以学习或使用 keep-alive-helper 来管理复杂情况

注意要点

1. keep-alive 本身是将 dom本身和其绑定的数据、事件 全部缓存，缓存的组件越多占用的内存越多。例如:后台管理系统拥有较多页面和需进行频繁的操作改动，不适合进行keep-alive的缓存,考虑用只缓存数据(如 vuex),页面再重新渲染。
2. keep-alive 缓存后，在不刷新页面时候会一直存在，若要释放缓存的页面，vue2.5后使用max属性进行控制(必要时要手动地进行销毁 )。
3. keep-alive使用后，包裹的组件又会拥有俩个生命周期:activated和deactivated 。该组件第一次进入时触发生命周期的顺序是:created->mounted->activated ,当页面退出后 只会触发 deactivated生命周期;之后再次进入仅触发 activated 。 所以被缓存的界面进入和离开时，需要进行的操作要放在这俩个生命周期里。
4. 针对有滚动的页面,跳转前需要存储滚动条的滚动位置,当回到这个页面后根据这个数值滑动到这个位置。(也可以使用 vue-router自己的 scrollBehavior 方法)

<!-- $event 事件 -->
<template>
 <div ref="content">
  	<div @click="test($event)">...test...</div>
  	<div @click="test($event)">...test...</div>
  	<div @click="test($event)">...test...</div>
 </div>
</template>
<script>
....
methods:{
	test(e){
	//console.log(e) //里面每个属性 自行查找含义
	//e.currentTarget  //获取当前dom元素后可进行操作
	//let top1 = e.currentTarget.getBoundingClientRect() //获取元素距离视口高度
	let top2 = this.$refs.content.scrollTop //获取滚动条位置
	//返回后，直接根据存储的值,div进行滚动操作
	this.$refs.content.scrollTo({
        top: top2,
        left: 0
      })
	}
 }
</script>

另外一种页面滚动形式,其中操作大同小异 参考:Vue获取点击元素到顶部的距离