keep-alive缓存 echart表图重绘问题

<template>
	<div>
		<keep-alive>
		    <router-view v-if="$route.meta.keepAlive"></router-view>
		</keep-alive>
		<router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
</template>

钩子函数执行顺序：

• 不使用keep-alive
  beforeRouteEnter --> created --> mounted --> destroyed
• 使用keep-alive
  beforeRouteEnter --> created --> mounted --> activated --> deactivated
  再次进入缓存的页面，只会触发beforeRouteEnter -->activated --> deactivated 。created和mounted不会再执行。

keep-alive生效之后 页面组件下需要回显如echart，table之类的表图数据是不能再当前组件下使用v-if来判断显示的DOM节点, 如下：

<div class="conPdf">
   <groupCompany :groupList="groupList" v-if="!jurisdList.tab"></groupCompany>
   <FramePage  :moduleParam="groupList"  v-if="!jurisdList.tab"></FramePage>
 </div>

在当前页面请求数据传递给子组件显示数据时当子组件发生销毁-创建的操作 数据虽然缓存 但页面表图不会发生重绘（也可以调用表图重绘功能）
改正：

父组件
<div class="conPdf">
   <commonPage ref="commonPage" :groupList="groupList"></commonPage>
 </div>
 
 子组件
 <div>
 	<groupCompany :groupList="groupList" v-if="!jurisdList.tab"></groupCompany>
   <FramePage  :moduleParam="groupList"  v-if="!jurisdList.tab"></FramePage>
 </div>

在父组件调用接口进行数据整合 在中间层子组件进行条件判断（ 相当于各自的私有作用域）这样表图不需要重绘