iview 动态加载Tabs时的优化

问题：
动态加载Tabs时，会触发所有TabPane子组件中初始化方法。
出现没必要的请求和性能的消耗

组件：

<template>
  <div style="width:300px;margin:0 auto">
    <Tabs :value="tabName">
      <TabPane v-for="(item,index) in tabDatas" :label="item.label" :name="item.name" :key="index">
        <Son></Son>
      </TabPane>
    </Tabs>
  </div>
</template>
<script>
import Son from './Son.vue'
export default {
  name: 'Home',
  components: {
    Son
  },
  data () {
    return {
      tabName: '',
      tabDatas: [
        {
          label: '标签一',
          name: '1'
        },
        {
          label: '标签二',
          name: '2'
        },
        {
          label: '标签三',
          name: '3'
        }
      ]
    }
  },
  methods: {
  },
  created () {
    this.tabName = this.tabDatas[0].name
  }
}
</script>

子组件

<template>
  <div>
    ---------------------内容-----------------
  </div>
</template>
<script>
export default {
  name: 'tag',
  data () {
    return {
    }
  },
  created () {
    console.log('我在请求接口加载数据')
  }
}
</script>
<style lang="less" scoped>
</style>

现象
有几个TabPane 就会执行几次子组件中的created(）的方法

优化

 <Tabs :value="tabName">
      <TabPane v-for="(item,index) in tabDatas" :label="item.label" :name="item.name" :key="index">
        <!-- 加上v-if,只加载当前所选项 -->
        <Son v-if="tabName===item.name"></Son>
      </TabPane>
    </Tabs>

结果