vue中keep-alive缓存机制

在vueRouter中给菜单指定keepAlive时就能让页面第一次进入后缓存页面

不使用keep-alive时钩子的执行顺序

beforeRouterEnter --> created --> mounted --> destoryed

使用keep-alive时钩子的执行顺序

1、第一次进入缓存界面 beforeRouterEnter --> created --> mounted --> activated --> deactivated
2、第二次进入缓存界面 beforeRouterEnter --> activated --> deactivated

如上所知，第二次进入页面不会执行created、mounted钩子，若需要获取信息的时候，就需要在beforeRouterEnter里获取数据

这时就会发现一个问题，第一次请求时，beforeRouterEnter里请求了数据，created里也请求了数据(一般情况都是在created里请求数据) 就请求了两次这个问题怎么解决呢？

看以下代码

created() {
    console.log(1);
  },
  mounted() {
    console.log(2);

  },
  beforeRouteEnter(to, from, next) {
    console.log(3);
    next(vm => {
      console.log(4);
    })
  }

第一次进入代码执行顺序

3 -> 1 -> 4 -> 2

第二次进入代码执行顺序

4 -> 2

解决方法:

虽然beforeCreatedEnter在created和mounted之前就执行了，但是next()的执行顺序却是在created之后，所以可以在created里获取数据的时候给一个flag= true，如果flag为真(created里获取了数据)，则next不做任何操作，若未获取数据，flag为假，则next里执行获取数据操作这样就不会有获取数据重复的问题记住每次执行完beforeCreatedEnter的时候将flag置为false，不置为false的话，下一次进入页面还是true，next和created里都不执行获取数据的操作