一、测试日志：

测试设计为三级组件，初级不做控制台输出，二级不用`keep-alive`，三级为主要测试标准

1.1、子级提取级顺序表

创建

三级.vue?0c92:18            ==>beforeCreate:NaN
三级.vue?0c92:49            ==>computed:1
三级.vue?0c92:55            ==>created:2
三级.vue?0c92:63            ==>beforeMount:3
三级.vue?0c92:67            ==>filters:3
三级.vue?0c92:24            ==>#:directives-bind:1
三级.vue?0c92:28            ==>#:directives-inserted:2
三级.vue?0c92:75            ==>mounted:4
三级.vue?0c92:100           ==>activated: keep-alive启用

数据更新

三级.vue?0c92:49            ==>computed:5
三级.vue?0c92:88            ==>watch:1=>5
三级.vue?0c92:80            ==>beforeUpdate:5
三级.vue?0c92:67            ==>filters:5
三级.vue?0c92:32            ==>#:directives-update:1
三级.vue?0c92:36            ==>#:directives-componentUpdated:2
三级.vue?0c92:84            ==>updated:5

销毁

三级.vue?0c92:104           ==>deactivated:keep-alive停用
三级.vue?0c92:93            ==>beforeDestroy:7
三级.vue?0c92:40            ==>#:directives-unbind:3
三级.vue?0c92:97            ==>destroyed:8

1.2、总表

创建

二级.vue?5584:37            beforeCreate:NaN
二级.vue?5584:68            computed:1
二级.vue?5584:74            created:2
二级.vue?5584:82            beforeMount:3
二级.vue?5584:86            filters:3
二级.vue?5584:43            #:directives-bind:1
三级.vue?0c92:18            ==>beforeCreate:NaN
三级.vue?0c92:49            ==>computed:1
三级.vue?0c92:55            ==>created:2
三级.vue?0c92:63            ==>beforeMount:3
三级.vue?0c92:67            ==>filters:3
三级.vue?0c92:24            ==>#:directives-bind:1
二级.vue?5584:47            #:directives-inserted:2
三级.vue?0c92:28            ==>#:directives-inserted:2
三级.vue?0c92:75            ==>mounted:4
三级.vue?0c92:10            ==>activated: keep-alive启用
二级.vue?5584:94            mounted:4

数据更新

二级.vue?5584:68            computed:5
二级.vue?5584:10            watch:1=>5
二级.vue?5584:99            beforeUpdate:5
二级.vue?5584:86            filters:5
二级.vue?5584:51            #:directives-update:1
二级.vue?5584:55            #:directives-componentUpdated:2
三级.vue?0c92:49            ==>computed:5
三级.vue?0c92:88            ==>watch:1=>5
三级.vue?0c92:80            ==>beforeUpdate:5
三级.vue?0c92:67            ==>filters:5
三级.vue?0c92:32            ==>#:directives-update:1
三级.vue?0c92:36            ==>#:directives-componentUpdated:2
三级.vue?0c92:84            ==>updated:5
二级.vue?5584:103           updated:5

销毁

二级.vue?5584:112           beforeDestroy:6
二级.vue?5584:59            #:directives-unbind:3
三级.vue?0c92:104           ==>deactivated:keep-alive停用
三级.vue?0c92:93            ==>beforeDestroy:7
三级.vue?0c92:40            ==>#:directives-unbind:3
三级.vue?0c92:97            ==>destroyed:8
二级.vue?5584:116           destroyed:7

二、代码

此为三级组件的代码

<template>
  <div>
    <div v-aatest='0'>{{aa|aaa}}</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      aa: 0
    };
  },
  beforeCreate () {
    this.aa += 1;
    console.log('==>beforeCreate:' + this.aa);
  },
  directives: {
    aatest: {
      bind (el, binding, vnode) {
        binding.value++;
        console.log('==>#:directives-bind:' + binding.value);
      },
      inserted (el, binding, vnode) {
        binding.value++;
        console.log('==>#:directives-inserted:' + binding.value);
      },
      update (el, binding, vnode) {
        binding.value++;
        console.log('==>#:directives-update:' + binding.value);
      },
      componentUpdated (el, binding, vnode) {
        binding.value++;
        console.log('==>#:directives-componentUpdated:' + binding.value);
      },
      unbind (el, binding, vnode) {
        binding.value++;
        console.log('==>#:directives-unbind:' + binding.value);
      }
    }
  },
  computed: {
    bbb () {
      this.aa += 1;
      console.log('==>computed:' + this.aa);
      return this.aa
    }
  },
  created () {
    this.aa += 1;
    console.log('==>created:' + this.aa);
  },
  beforeMount () {
    this.aa += 1;
    console.log('==>beforeMount:' + this.aa);
  },
  filters: {
    aaa (value) {
      console.log('==>filters:' + value);
      value += 1;
      return value
    }

  },
  mounted () {
    this.aa += 1;
    console.log('==>mounted:' + this.aa);
  },
  beforeUpdate () {
    //this.aa += 1;
    console.log('==>beforeUpdate:' + this.aa);
  },
  updated () {
    //this.aa += 1;
    console.log('==>updated:' + this.aa);
  },
  watch: {
    bbb (f, n) {
      console.log('==>watch:' + n + '=>' + f)
    }
  },
  beforeDestroy () {
    this.aa += 1;
    console.log('==>beforeDestroy:' + this.aa);
  },
  destroyed () {
    this.aa += 1;
    console.log('==>destroyed:' + this.aa);
  },
  activated () {
    console.log('==>activated:' + ' keep-alive启用');
  },
  deactivated () {
    this.aa += 1;
    console.log('==>deactivated:' + 'keep-alive停用');
  },

};
</script>

结尾

有兴趣做测试的同学使用三级组件代码复制多一份做二级代码再引入三级的时使用keep-alive就成，初级使用v-if和一个按钮改变v-if绑定的值达到销毁组件的效果，最后希望这测试能够帮到同在学习的大家，如有错误不忘提醒留言。