VUE,element-ui，优化tabs组件每次点击，所有子页面都重新渲染问题。

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

v-if属于惰性加载，当值为false的时候，就不会加载。

这个办法是自己研究出来的一个方法，应该还有改善的空间，
本人在不断的优化代码，在发现了更简短的代码之后会在下面更新，已经更新到第三版。

需要使用的可直接看最后一个版本，如果想要学习交流的可用从上往下看。

第一版本：

1.在data中定义每个子组件相应的值，ture为加载，false为不加载。
2.在子组件中使用v-if来判断是否渲染当前页面
3.在函数中对子组件的值进行切换。

handleClick(tab) {
   
      switch (tab.name) {
   
        case "first":
          this.pageOne = true;
          this.pageTwo = false;
          this.pageThree = false;
          break;
        case "second":
          this.pageOne = false;
          this.pageTwo = true;
          this.pageThree = false;
          break;
        case "third":
          this.pageOne = false;
          this.pageTwo = false;
          this.pageThree = true;
          break;

        default:
          break;
      }

使用switch来判断tab的name值，并且对不同情况做出不同的判断。
但是这对于子页面过多的情况来说实在是太麻烦了。所以研发出第二版~

第二版：解决handleClick(tab)代码冗余

1.这一次定义一个数组，将子页面的值都放在里面，用来判断该页面是否需要渲染

data() {
   
    return {
   
      activeName: "allOrder",
      pages: {
   
        allOrder: true,//第一个需要渲染的页面
        unpaid: false,
        wangtingList: false,
        wangtingService: false,
        unCheck: false,
        finish: false,
        stayAway: false,
      },
    };
  },

2.在子页面组件中使用v-if判断是否渲染

 <el-tab-pane label="所有订单" name="allOrder">
     <allOrder v-if="pages.allOrder"></allOrder>
  </el-tab-pane>

3.定义切换组件时࿰