vue的keep-alive

1、keep-alive的作用是缓存组件,避免多次加载相应的组件,减少性能的消耗
2、keep-alive: 被缓存的页面生命周期是怎么执行的?
第一次进入会正常执行从beforeCreate函数开始;
之后的进入只会执行activted/deactivated两个函数
3、使用

	<template>
		//这样是缓存所有的组件,
	    <template>
	      <div id="app">
	        <keep-alive >
	          <router-view></router-view>
	        </keep-alive>
	        <tabBar/>
	      </div>
	    </template>

	</template>

缓存部分页面

	<template>
	//这种方式是缓存一部分页面
      <div id="app">
        <keep-alive >
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
        <tabBar/>
      </div>
 </template>

	{
	      path: '/usermanage',
	      name: 'usermanage',
	      meta: {
	        keepAlive: true, //该字段表示该页面需要缓存
	      },
	      component: resolve => require(['@/views/userManage/userManage'], resolve) // 路由懒加载
	  },

注: meta是自定义的属性,在里面定义一些初始值,通过这些值来进行一些操作,用来做校验最合适不过了

例子: 从其他页面跳转到此页面需要请求数据,当从下级页面返回时这个页面时就不会进行数据请求

{
      path: '/usermanage',
      name: 'usermanage',
      meta: {
        keepAlive: true, //该字段表示该页面需要缓存
        isBack: false, //用于判断上一个页面是哪
      },
      component: resolve => require(['@/views/userManage/userManage'], resolve) // 路由懒加载
  },


<script>
  export default {
    name: 'currentName',
    data() {
      return {
        isFirstEnter: false, //初始值设置为false是因为如果keep-alive的第一次进入会执行created函数,而之后不会执行
      }
    },
    beforeRouteEnter(to, from, next) {
      if (from.name == 'nextName') { // 这个name是下一级页面的路由name
        to.meta.isBack = true; // 设置为true说明你是返回到这个页面，而不是通过跳转从其他页面进入到这个页面
      }
      next()
    },
    created:{
    	this.isFirstEnter = true
    },
    activated() {
      if (!this.$route.meta.isBack || this.isFirstEnter) {
        this.getDataFn() // 这里发起数据请求，（之前是放在created或者mounted中，现在只需要放在这里就好了，不需要再在created或者mounted中请求！！）
      }
      this.$route.meta.isBack = false //请求完后进行初始化
      this.isFirstEnter = false;//请求完后进行初始化
    },
  }
</script>