项目难点：keep-alive的那些坑坑

发布博客的第二天，加油！

最近一直在整理项目的一些难点以及亮点，比如：keep-alive。

keep-alive介绍

keep-alive本身是vue2.0的功能，

<keep-alive> 包裹动态组件时，缓存不销毁，它自身不会渲染 DOM 元素，也不会出现在父组件链中。

keep-alive优 / 缺点

优点：它能够使动态组件以及内部数据不刷新，减少对服务器的请求，

缺点：所有组件都会被缓存

 keep-alive使用场景

tabbar页频繁切换，但数据不会频繁刷新

  keep-alive的使用

1、开启keep-alive：

        keep-alive配合了router-view使用。

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

2、产生的问题：

点击新闻列表查看详情，返回点击查看其他新闻详情发现数据没更新，导致数据不刷新

所以共用的组件不能让keep-alive缓存。

3、解决方案：

方案一：

在详情组件里监听路由变化再次赋值给ID，通过activated钩子触发请求函数，

此时会发现数据每隔几秒就会刷新，体验感不好，

因此要用到deactivated,离开页面详情后，deactivated把当前内容隐藏，再次进入actived看不到原来数据，ajax请求数据完成后又可以展示出来。

watch: {
   -----监听路由变化再次赋值给ID
},
activated() {
   -----触发请求函数
},
deactivated() {
    this.showContent = false;
}

方案二： 

使用exclude属性不缓存模板组件即可。

<keep-alive exclude="detail">
      <router-view></router-view>
</keep-alive>