VUE +ElementUI，tabs组件小坑——单页面被重复构建

前言

最近使用VUE + ElementUI 中的 el-tabs组件来完成一个后台管理系统的框架模板时，发现单页面的vue组件，在放进el-tabs组件中进行切换时，同一个vue页面的created方法被构建了多次，一般情况下看不出来任何问题。

然而，我们通常会在页面加载完毕时，在created钩子或mounted钩子中，对数据进行首次查询，来达到进入页面后能直接看到数据的效果。

但是，在el-tabs组件切换时，由于页面被重复构建了多次，会导致在created钩子或mounted钩子中的请求也被重复执行多次，这显然会加重服务器的负担，且会导致数据响应缓慢的情况，是我们不希望看到的结果。

具体现象如下图，图中采用了tabs组件嵌套的方式来构建导航的显示。

如下图，点击角色管理页面进入时，希望能够首次加载数据。在谷歌浏览器开发人员控制台中，可以很清楚的看到，同一请求被发送了四次，其中OPTIONS请求是跨域的预检，那么实际上是同时发送了两次请求，这是比较令人诧异的。

实际上，在嵌套使用el-tabs组件时，这个页面被构建的次数取决于父子tabs中一共出现了多少个tab标签，比如父tab中有3个标签页，子tab中有2个标签页，那么随机打开子tab中的这个两个标签页之一时，就会被重复构建
2 * 3 = 6次。

个人猜测，是因为tabs组件生成的tab-panel面板只是进行了隐藏，虽然不是同一个页面，但会对单页面的构建的钩子产生影响。

实验效果可以参考一下其他博客的内容，和我这个遇到的现象是差不多的：