VUE,element-ui，优化tabs组件每次点击，所有子页

优化tabs组件每次点击，所有子页面都重新渲染问题

<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" class="report">
      <el-tab-pane name="first">
        <span slot="label"> 概述 </span>
        <overview></overview>
      </el-tab-pane>
      <el-tab-pane name="second">
        <span slot="label"> 版本信息 </span>
        <versionInfo></versionInfo>
      </el-tab-pane>
      <el-tab-pane name="third">
        <span slot="label"> 游戏信息 </span>
        <gameInfo></gameInfo>
      </el-tab-pane>
      <el-tab-pane name="fourth">
        <span slot="label"> 结论描述 </span>
        <conclusion></conclusion>
      </el-tab-pane>
      <el-tab-pane name="fifth">
        <span slot="label"> 测试项目 </span>
        <testProject></testProject>
      </el-tab-pane>
      <el-tab-pane name="sixth">
        <span slot="label"> 问题明细 </span>
        <problemDetail></problemDetail>
      </el-tab-pane>
      <el-tab-pane name="seventh">
        <span slot="label"> 安全问题汇总 </span>
        <securityIssues></securityIssues>
      </el-tab-pane>
    </el-tabs>

在element-ui的tabs组件中，我们发现每次切换页面，所有的子组件都会重新渲染一次。当子页面需要发送数据请求并且子页面过多时，这样会过多的占用网络资源。这里我们可以使用v-if来进行判断是否渲染该子页面。

<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" class="report">
      <el-tab-pane
        v-for="(pages, index) in pages"
        v-bind:key="index"
        :label="pages.label"
        :name="pages.name">
        <component :is="pages.name" v-if="pages.name == nowPage"></component>
      </el-tab-pane>
    </el-tabs>
<script>
import overview from './components/Overview'
import versionInfo from './components/VersionInfo'
import gameInfo from './components/GameInfo'
import conclusion from './components/Conclusion'
import testProject from './components/TestProject'
import problemDetail from './components/ProblemDetail'
import securityIssues from './components/SecurityIssues'
export default {
  components: { 
    overview,
    versionInfo, 
    gameInfo,
    conclusion,
    testProject,
    problemDetail,
    securityIssues
  },
  data() {
    return {
      activeName: 'overview',
      nowPage: 'overview',
      pages: [{
        name: 'overview',
        label: '概述'
      },{
        name: 'versionInfo',
        label: '版本信息'
      },{
        name: 'gameInfo',
        label: '游戏信息'
      },{
        name: 'conclusion',
        label: '结论描述'
      },{
        name: 'testProject',
        label: '测试项目'
      },{
        name: 'problemDetail',
        label: '问题明细'
      },{
        name: 'securityIssues',
        label: '安全问题汇总'
      },]
    }
  },
  methods: {
    handleClick(tab, event) {
      this.nowPage = tab.name
    }
  }
}
</script>

//////////////////////////////////////////////////
之后又有新的问题继续更新

vue让子组件刷新的方法

<component :is="pages.name" v-if="pages.name == nowPage" :key="codeNum"></component>
初始化codeNum:new Date().getTime()
我们只需要去改变codeNum就会让组件重新刷新
需要的时候重新去给codeNum赋值就可以了