keep-alive

以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染。（在开发Vue项目的时候，有一部分部分组件是没必要多次渲染的）

一般用来使用在，路由不改变，但是组件内部内容改变的情况

可以结合elementui的el-radio-group组价使用

<div class="whiteBackground tradeInfoMaintain">
    <el-radio-group
      v-model="tabAction"
      class="tabHeader"
      size="medium"
      @change="clicktTabHeader"
    >
      <el-radio-button label="8">项目类产品交易</el-radio-button>
      <el-radio-button label="9">组合类产品交易</el-radio-button>
    </el-radio-group>
    <div class="tabBody">
      <!--动态加载组件-->
      <transition name="component-fade" mode="out-in">
        <component :is="currentNode" ref="info"></component>
      </transition>
    </div>   </div>

import combination from './combination';
import projectType from './projectType';
const currentNodeMap = {
  8: projectType, // 项目类产品交易 根据字段
  9: combination
};


 data() {
    return {
      tabAction: '',
      currentNode: projectType
    };
  },
 methods: {
    clicktTabHeader(node) {
      this.$store.commit('financeAfterManage/getTabAction', node);
      this.currentNode = currentNodeMap[node];
    }
  }

对应两个子组件会增加两个生命周期
activated:可以在该生命周期做ajax的请求  在 keep-alive 组件激活时调用
deactivated: 在 keep-alive 组件停用时调用