keep-alive的使用

为什么使用keep-alive

keep-alive翻阅vue官网的时候是这样说的：
image.png
这就是为什么我们使用keep-alive.用人话说就是为了性能，需要加载的时候就加载，不需要加载的时候我们坚决不能操作他们，否则产品经理就会无脑找你，为什么这里加载这么缓慢的吗？

怎么使用keep-alive

咱们顺着例子把他一点点撕出来：
例一：vue中前进刷新后退缓存的使用
基本思路：
1）在router下面的index.js文件里面使用 meta参数进行缓存组件的配置

  1. {
  2.               path: '/A',
  3.               name: 'a',
  4.               component: () => import('@/components/A'),
  5.               meta: {
  6.               isUseCache: false,  // 通过此字段判断是否刷新
  7.                 keepAlive:true // 通过此字段判断是否需要缓存当前组件 
  8.               }
  9.             },
  10.             {
  11.               path: '/B',
  12.               name: 'b',
  13.               component: () => import('@/components/B'),
  14.               meta: {
  15.               isUseCache: false,  
  16.                 keepAlive: true
  17.               }
  18.             },

2）使用keep-alive缓存组件，注意这里可以设置缓存规则

  1. <keep-alive>      
  2.     <router-view v-if="$route.meta.keepAlive"/>    
  3. </keep-alive>    
  4. <router-view v-if="!$route.meta.keepAlive"/>

规则如下：引自官网：https://cn.vuejs.org/v2/api/#keep-alive

  1. <!-- 逗号分隔字符串 -->
  2. <keep-alive include="a,b">
  3.   <component :is="view"></component>
  4. </keep-alive>
  6. <!-- 正则表达式 (使用 `v-bind`) -->
  7. <keep-alive :include="/a|b/">
  8.   <component :is="view"></component>
  9. </keep-alive>
  11. <!-- 数组 (使用 `v-bind`) -->
  12. <keep-alive :include="['a', 'b']">
  13.   <component :is="view"></component>
  14. </keep-alive>

3）在beforeRouteLeave判断是否缓存

  1.  beforeRouteLeave (to,from,next){
  2.     if(to.name=='robotAdd'){
  3.        from.meta.keepAlive = true;
  4.     }
  5.     next()
  6.   },

此时有的同学会认为我如果想刷新呢？现在你给我搞得没发刷新了，不要着急问题不大，我们可以借助生命周期activated

  activated(){
    // console.log("activated====")  
     if(!this.$route.meta.isUseCache){    
       //需要写的业务代码
    }
    // 通过这个控制刷新
    this.$route.meta.isUseCache = false;
  },

注意生命周期细节：
设置了keepAlive缓存的组件：
第一次进入：beforeRouterEnter ->created->…->activated->…->deactivated
后续进入时：beforeRouterEnter ->activated->deactivated

老生常谈的函数、computed、watch

<template>
  <div >{{fullName}}
      <button @click="setName">变身啦！</button>
  </div>
</template>

<script>
export default {
    data() {
        return {
            firstName: '务华',
            lastName: "andy"
        }
    },
    props: {
      msg: String
    },
    methods: {
        setName() {
            this.firstName = "帅哥";
            this.lastName = "handsome"
        }
    },
    computed: {
        fullName() {
            return this.firstName + ' ' + this.lastName
        }
    },
    watch: {
        fullName(newval,oldval) {
            //注重过程然后进行业务逻辑
          console.log(newval)
          console.log(oldval)
        }
    }
}
</script>

normal video.mp4 (481.01KB)方法和计算属性两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 firstName 、lastName还没有发生改变，多次访问 fullName 计算属性会立即返回之前的计算结果，而不必再次执行函数，提高性能
对于计算属性和watch，个人认为watch更注重过程，时刻监听，我们可以在过程中执行逻辑，比如监听电池电量，设置红黄绿的颜色等等

分页组件刷新之后还是停留在第一页的bug

1、确认组件是否写入:current-page.sync=”currentPage”

<el-pagination
        background
         :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total"
        :current-page.sync="currentPage"
        @current-change="handlePagechange"
         @size-change="handleSizeChange"
        v-if="total!=0"
      ></el-pagination>

##data里面定义：
pageSize: 20,//我这里每页显示20条，这里可以自定义
total: '',
currentPage: ''

2、在页码选择的回调函数里面使用sessionStorage缓存

handlePagechange(page) {
this. currentPage=page;
window.sessionStorage.setItem('currentPage',page)
 },

3、在mounted生命周期函数获取缓存的数据，然后进行数据请求

mounted() {
   if( window.sessionStorage.getItem('currentPage')){
      let currentPage = Number(window.sessionStorage.getItem('currentPage'));
      ##进行业务网络请求
    }else{
       ##进行业务网络请求
    } 
  },