Tabs组件使用优化(Element-UI)

tab在后台项目中也比较常用的。假设我们有三个tab选项，每个tab都会向后端请求数据，但我们希望一开始只会请求当前的tab数据，而且tab来回切换的时候不会重复请求，只会实例化一次。首先我们想到的就是用v-if 这样的确能做到一开始不会挂载后面的tab，但有一个问题，每次点击这个tab组件都会重新挂载一次，这是我们不想看到的，这时候我们就可以用到<keep-alive>了。

keep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。 它是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

所以我们可以这样写tabs

• 在el-tabs组件外层, 尽量使用 row 和 col 组件布局, 否则大型项目在切换tab时会出现卡死情况

<el-row>
    <el-col :span="24">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="简介及公告" name="announcement">
            <announcement />
          </el-tab-pane>
          <el-tab-pane label="资讯" name="information">
            <keep-alive>
              <information v-if="activeTab=='information'" />
            </keep-alive>
          </el-tab-pane>
          <el-tab-pane label="直播流配置" name="stream">
            <keep-alive>
              <stream v-if="activeTab=='stream'" />
            </keep-alive>
          </el-tab-pane>
        </el-tabs>
    </el-col>
</el-row>