vue通过keep-alive实现路由缓存

(⊙﹏⊙) pm提了需求，让从edit页面返回到 list页面的时候实现 搜索，翻页的缓存，就想到了keep-alive
，需要用actived生命周期代替原来的 created 或者 mounted 生命周期
踩坑注意
注意：如果有个多个router-view注意keep-alive包裹在哪个层级的router

// list页面再次刷新组件的时候会进入这个生命周期
 activated() {
    this.getList()
  }

<template>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

// 子组件中
	this.$router.back();

原理

Vue渲染的整个过程：

Vue的渲染是从图中render阶段开始的，但keep-alive的渲染是在patch阶段，这是构建组件树（虚拟DOM树），并将VNode转换成真正DOM节点的过程。

1. Vue在渲染的时候先调用原型上的_render函数将组件对象转化成一个VNode实例；而_render是通过调用createElement和createEmptyVNode两个函数进行转化；
2. createElement的转化过程会根据不同的情形选择new VNode或者调用createComponent函数做VNode实例化；
3. 完成VNode实例化后，这时候Vue调用原型上的_update函数把VNode渲染成真实DOM，这个过程又是通过调用patch函数完成的（这就是patch阶段了）

keep-alive不会生成真实的dom节点
Vue在初始化生命周期的时候，为组件实例建立父子关系会根据abstract属性决定是否忽略某个组件。在keep-alive中，设置了abstract:true，那Vue就会跳过该组件实例。最后构建的组件树中就不会包含keep-alive组件，那么由组件树渲染成的DOM树自然也不会有keep-alive相关的节点了

如何缓存的？

• 在首次加载被包裹组建时，由keep-alive.js中的render函数可知，vnode.componentInstance的值是undfined，keepAlive的值是true，因为keep-alive组件作为父组件，它的render函数会先于被包裹组件执行；那么只执行到i(vnode,false)，后面的逻辑不执行；
• 再次访问被包裹组件时，vnode.componentInstance的值就是已经缓存的组件实例，那么会执行insert(parentElm, vnode.elm, refElm)逻辑，这样就直接把上一次的DOM插入到父元素中