JSFiddle - React, Tailwind, and code Playground

by simati

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router"></script>

<div id="app">
  <p>有这样一个需求:A>B>C三级页面，用keep-alive做了路由页面缓存，A>B刷新B页的数据，B>C刷新C页的数据，C>B使用B层的缓存；但是由于缓存A>B时会使用之前缓存的页面，我就在B>A时用了vm.$destroy销毁B,但只要调用了一次vm.$destroy，再从B>C>B>C>B，B页是执行完整的生命周期，缓存无效，但是也看不出什么时候destroy的B，可以在控制台查看每个组件执行的结果，ps:只在B>A时destroy了B,但这样从C>B时B生命周期也有影响</p>
  <keep-alive><router-view></router-view></keep-alive>
</div>

JavaScript

var A = {
    template:'<div><h1>Page A</h1><p><button @click="goB">Go Page B</button></p></div>',
    beforeCreate() {
      console.log('beforeCreate-1');
    },
    created() {
      console.log('created-1');
    },
    beforeMount() {
      console.log('beforeMount-1');
    },
    mounted() {
      console.log('mounted-1');
    },
    beforeUpdate() {
      console.log('beforeUpdate-1');
    },
    updated() {
      console.log('updated-1');
    },
    activated() {
      console.log('activated-1');
    },
    deactivated() {
      console.log('deactivated-1');
    },
    beforeDestroy() {
      console.log('beforeDestroy-1');
    },
    destroyed() {
      console.log('destroyed-1');
    },
    methods: {
    	goB() {
      	this.$router.push('/b');
      }
    }
}
var B = {
    template:'<div><h1>Page B</h1><p><button @click="goC">Go Page C</button></p><p><button @click="goA">Back Page A</button></p></div>',
    beforeCreate() {
    console.log('beforeCreate-2');
    },
    created() {
      console.log('created-2');
    },
    beforeMount() {
      console.log('beforeMount-2');
    },
    mounted() {
      console.log('mounted-2');
    },
    beforeUpdate() {
      console.log('beforeUpdate-2');
    },
    updated() {
      console.log('updated-2');
    },
    activated() {
      console.log('activated-2');
    },
    deactivated() {
      console.log('deactivated-2');
    },
    beforeDestroy() {
      console.log('beforeDestroy-2');
    },
    destroyed() {
      console.log('destroyed-2');
    },
    methods: {
    	goA() {
      	this.$destroy();// if add this to mannual destroy the component, the lifecycle will be wired;
      	this.$router.push('/');
      },
      goC() {
      	this.$router.push('/c');
      }
    }
}
var C = {
    template:'<div><h1>Page C</h1><p><button @click="goB">Back Page B</button></p></div>',
    beforeCreate() {
      console.log('beforeCreate-3');
    },
    created() {
      console.log('created-3');
    },
   ...