vue keep-alive妙用

周所周知vue实现spa单页引用的核心原理是：根据url动态的切换组件

但是每次切换组件时，组件都会重新实例化，数据初始化。
那么有没有一个api，
可以让组件在切换的时候保持原来的状态呢？比喻表单输入值，分页信息等等

这就是keep-alive了

官方是这样介绍他的用法的

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

<!-- 多个条件判断的子组件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

<!-- 和 `<transition>` 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

一目了然，就是用它套在需要保持状态的组件的外面
大家知道其实每个页面都是一个组件，所以keep-alive,还可以控制一个页面的状态，
用法就是：

 <keep-alive include="logs,productManage">
          <router-view />
  </keep-alive>

对直接用它包住视图组件

keep-alive有3个属性：
include 包含的组件的名name值
exclude 不包含的
max 最大允许保持激活的组件数量

include exclude 的3种写法

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

这里的name值，就是组件的name值，

export default {
  name: 'logs',
  components: { page, myTag },
  data () {
    return {}
  }
 }   

也可以是用vue.component(‘foo’,{ })这里的组件名称。

为了更好的满足需求，vue为keep-alive提供了另外两个生命周期钩子

  activated () {
    alert('我当前要激活啦')
    this.init({ page: 1, pageSize: 10 })
  },
  deactivated () {
    alert('我当前要被移除啦')
  },

activated ：
组件激活是来一波业务逻辑
deactivated
离开组件时再来一波业务，