vue小项目总结与笔记【八】——keep-alive的使用

keep-alive的作用：

当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，又需要请求数据，这就导致多次请求数据，降低了性能。这时候我们使用keep-alive来缓存组件，防止二次渲染，这样会大大的节省性能。

keep-alive的基本用法：

<template>
  <div id="app">
    // keep-alive  路由的内容被加载过一次之后，就自动保存到内存中，不需要重新请求数据（不会再执行mounted，需要重新请求的ajax可以放在activated中）
    //  exclude="Detail"   可设置详情页不缓存 因为要获取每一个的id 
    <keep-alive :exclude="/WeekendDetail|Detail/">
    //  router-view 显示的是当前路由的地址所对应的内容
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

用了keep-alive后，会多出一个生命周期函数 activated，有需要重新请求的ajax就放在里面，因为mounted在返回该页面时不会再执行。

    mounted () {
        this.lastCity = this.city
        this.getHomeInfo()
    },
    activated () {
        // 城市与上次不同时  首页要重新发送ajax请求
        if (this.lastCity !== this.city) {
            this.lastCity = this.city
            this.getHomeInfo()
        }
    }

但是如果使用了 :exclude="/组件1|组件2/" ，意思是组件1，组件2被排除在外，这两个组件不使用keep-alive，所以在组件1和2中，执行ajax请求还是用mounted就好。