需求：
1.列表页点击某一项，进入详情页，显示当前这一项的详情
2.从详情页返回列表页，到列表页原来进入的位置
通常我们设计页面时候详情页和列表页就是两个路由：通过keepalive缓存 router中加入meta属性设置keepalive:true
router-view v-if="$route.meta.keepalive" 再配合使用：scrollBehavior去找回原来的位置
这里为什么不能直接return而必须使用异步滚动操作呢？以下是个人的一些见解欢迎大家来探讨指正。
-
首先我们要先去了解scrollBehavior函数究竟在组件的哪个生命周期后才开始执行。这里我对组件的每个生命周期和scrollBehavior函数进行alert,经排查结果：scrollBehavior函数在组件的生命周期mounted后beforeUpdate前执行。
-
在scrollBehavior函数中直接return{ x:0, y:100}，进入页面仍在顶部。为什么不会滚动到100px处？猜测:mounted中的异步请求回来的数据赋值给data中的变量a，变量a因为vue的双向绑定更新了view层而引起滚动失效？
-
验证下以上的猜测,设置一个静态页面数据都已经在html上写死。scrollBehavior函数中直接return { x:0, y: 100}，结果:进入页面都会滚动到100px处。证明：确实与异步请求回来后的操作有关系。
-
接着了解vue的mounted和beforeUpdate时期都做了些什么。mounted时期:data数据已经挂在到页面上。beforeUpdate和updated时期：当vue发现data中的数据发生了改变，会触发对应组件的重新渲染。
-
根据步骤4.mounted时期发起的异步请求并不会阻碍主线程的后续操作，所以请求回调事件未触发(对data中的变量a赋值操作未执行)便继续去执行scrollBehavior函数。如果此时直接return{ x:0, y:100}。此时相当于在异步请求回调事件未执行前进行了滚动。等到滚动后异步请求回调事件开始执行,对data中的变量a被赋值，引起组件重新渲染又回到了顶部。这整个流程滚动是针对data的初始数据页进行滚动的,所以遮罩层仍会出现。
-
综合上述：必须使用异步滚动，利用setTimeout跳出主线程将回调事件放到队列中。由于mouted比scrollBehavior函数早执行，所以异步请求的回调事件优先进入队列，接下去才是setTimeout的回调事件。根据队列 先进先出的原理。先执行了异步请求回调事件对data中的变量a做赋值操作。此时相当于这已经是个静态页面了,接着我只要执行return { x:0, y: 100 }。这样就已经触发了页面滚动到100px的效果。但是由于data数据发生改变，页面重新渲染又回到顶部。这时整个轻触滚动效果已经暗中执行完成，不会再出现遮罩层了。
简单来说就是scrollBehavior函数是在mounted之后去执行，beforeUpdata之前，mouted时候已经拿到数据了，并且要更新在Dom上，那么因为mouted拿到数据会赋值给data，data一变就会触发视图更新，视图更新是在update钩子函数去做的，这时候如果直接使用scrollBehavior，让其坐标回到指定位置，scrollBehavior其实已经回到了指定位置，但由于他比update钩子要早，所以视图一刷新就又回去了，但是因为scrollBehavior触发了一次，只是你看不到，所以因为滚动引起的什么遮罩的逻辑就会出现。所以放入定时器内，等到视图更新后，再去定位到设定的坐标位置
但是我这里我并没有采用路由的方式，而是用了动态组件，通过is切换列表组件和详情组件的显示。所以路由那套keepalive就不能用了。
因为用了keepalive，上一次的DOM就会被缓存起来。所以进入不同人的详情页时候，要在详情组件的actived钩子中刷新数据。
列表组件：要做三件事：
1. mouted中绑定滚动事件，deactived离开钩子中获得滚动位置，actived中获得拿到上一次的滚动位置去滚动
2. actived中根据是否删除走不同的逻辑（根据详情页传递来的删除信号，删除的话刷新刷新数据，返回滚动位置；没删除直接返回存储的滚动位置）
总结: 其实这个需求做了三重优化：
1.事件绑定的防抖
2.DOM的缓存
3.接口请求根据删没删除决定需不需要请求接口，不能一概而论。