當我們在開發(fā)中遇到tab切換，這時候用el的el-tabs感覺很方便

但當我在把代碼都寫完后，發(fā)現(xiàn)一個問題就是頁面打開時

雖然我們只能看見當前一個tab頁，但是vue會幫你把你寫的所有tab頁的內(nèi)容都渲染出來了，只是其他的隱藏了，同時其他tab的js也都走了一邊，當你點擊tab時js就不會再去請求后臺

這種機制會造成一個問題，就是如果每個tab頁的數(shù)據(jù)都過大的時候，可能就會導致首次打開頁面卡頓現(xiàn)象，同時如果數(shù)據(jù)庫數(shù)據(jù)在實時發(fā)生變化的話，比如你一分鐘前打開的這個頁面，看的是tab1的內(nèi)容，看了1分鐘后我想看tab2的內(nèi)容，但此時tab2的內(nèi)容后臺數(shù)據(jù)庫已經(jīng)發(fā)生變化了，你能看到的只是1分鐘前的數(shù)據(jù)，那該怎么解決這個問題呢？

首先一開始一次加載所有tab的代碼是這樣的↓

<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
<el-tab-pane label="待處理" name="first"><processed/><!--這里是自定義的子模塊，也就是自定義組件--></el-tab-pane>
<el-tab-pane label="已處理" name="second"><un-processed/></el-tab-pane>
</el-tabs>

這時候v-if的作用就可以發(fā)揮出來了，當v-if的值為false時vue是不會去渲染該標簽下的內(nèi)容的

那我們就把tabs下的子模塊標簽上加v-if，一開始只設置其中一個為true其他都為false，當點擊tab切換時去改變v-if的值，代碼如下↓

<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
      <el-tab-pane label="待處理" name="first" :key="'first'">
        <processed v-if="isFirst"/>
      </el-tab-pane>
      <el-tab-pane label="已處理" name="second" :key="'second'">
        <un-processed v-if="isSecond"/>
      </el-tab-pane>
    </el-tabs>

js的代碼↓

import Breadcrumb from '@/components/Breadcrumb'
import Processed from './processed'
import UnProcessed from './unprocessed'
export default {
  components: {
    Breadcrumb,
    Processed,
    UnProcessed
  },
  data() {
    return {
      // 默認第一個Tab
      activeName: 'first',
      isFirst: true,
      isSecond: false
    }
  },
  methods: {
    handleClick(tab) {
      if (tab.name === 'first') {
        this.isFirst = true
        this.isSecond = false
      } else if (tab.name === 'second') {
        this.isFirst = false
        this.isSecond = true
      }
    }
  }
}

這樣就可以完美解決上面的問題，首次加載頁面只會渲染其中一個tab的內(nèi)容，同時點擊tab切換時頁面重新渲染頁面，good！