vue开启keep-alive需要注意的问题

为了让组件数据缓存，避免每次资源重复加载（例如每次切换导航时数据会重新加载一次，体验真的差），因此使用了keep-alive，解决了以上产生的问题。

封面.jpg

一、开启keep-alive

在这里keep-alive配合了router-view使用，keep-alive本身是vue2.0的功能，并不是vue-router的，所以在vue1.0版本是不支持的。

<template>
  <div id="app">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

二、产生的问题

keep-alive能使组件数据缓存，因此。如果有一个新闻列表，点击进入查看详情，返回点击查看其他新闻详情这时发现数据并没有更新，造成了数据不刷新的情况。
因此，我试了以下网友提出的解决方法，发现并没有什么用（或许是我弄错了）。

<template>
  <div id="app">
    <!--缓存想要缓存的页面，实现后退不刷新-->
    <!--加上v-if的判断，可以自定义想要缓存的组件，自定义在router里面-->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    
    <!--这里是其他的代码-->
  </div>
</template>

//在router文件加上meta判断
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
export default new Router({
    {//home会被缓存
        path:"/home",
        component:home,
        meta:{keepAlive: true}
    }
    {//hello不会被缓存
        path:"/hello",
        component:hello,
        meta:{keepAlive: false}
    }
})

三、我的解决方法

因此，个人拙见，我是这么解决的。在详情组件里监听路由变化再次赋值给ID，通过activated钩子触发请求函数，这时返回详情页面再次进入发现原有的数据还在，但是过几秒后数据就刷新了，数据是刷新了但是体验是非常不好的。因此需要用到另一个钩子deactivated销毁，离开详情页面时（deactivated）通过小技巧把当前的内容隐藏，再次进入详情页面时（activated）就不会看到原来的内容了，然后ajax请求数据完成后把它显示出来即可。
当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。

//$route发生变化时再次赋值listId
watch: {
   '$route'() {
        this.listId = this.$route.params.id;
    }
},
//通过activated钩子触发请求函数
activated() {
    this.getDetail();
},
//返回详情页面时 隐藏内容div区块 再进入详情时 显示内容div区块 
deactivated() {
    this.isShowContent = false;
}

四、最后

如果这篇文章帮助到了你，麻烦点个赞~