keep-alive和router-view的结合

<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

<keep-alive> 与 <transition>相似，只是一个抽象组件，它不会在DOM树中渲染(真实或者虚拟都不会)，也不在父组件链中存在，比如：你永远在 this.$parent 中找不到 keep-alive 。

 

<keep-alive :include="cachedViews">
  <router-view v-if="!$route.meta.noKeepAlive" :key="key" />
</keep-alive>
<router-view v-if="$route.meta.noKeepAlive" :key="key" />

cachedViews中保存的是所有需要缓存的组件的name(而非router的name)

keep-alive中组件的生命周期会有actived和deactivated两个钩子

• 使用<keep-alive>会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。
• 当引入keep-alive 的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated

• 我们知道 keep-alive 之后页面模板第一次初始化解析变成HTML片段后，再次进入就不在重新解析而是读取内存中的数据，即，只有当数据变化时，才使用VirtualDOM进行diff更新。故，页面进入的数据获取应该在activated中也放一份。数据下载完毕手动操作DOM的部分也应该在activated中执行才会生效。

  所以，应该activated中留一份数据获取的代码，或者不要created部分，直接将created中的代码转移到activated中。