在解决vue mounted执行多次问题之前，我们先来了解一些基本的知识。

        mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

        created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

        其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。

        今天遇到了一个百思不得其解的bug，vue的页面会多次调用同一个请求，每个页面调用的次数还不一样，有的调用三次，有的五次，甚至有一个调用了十二次，已经严重影响性能了。第一时间肯定是想大概率请求写到循环里了。然而检查了源码发现并没有。然后考虑是不是页面里的组件触发了请求事件。然而这个页面里根本没有引用组件。请求事件只是写在了mounted里，打印了一下，发现mounted也被多次触发。这冲击了我这个萌新小白的认知，不是明明说好mounted只能触发一次的咩！？只好继续查资料看代码，终于发现了问题所在：

        原来是把父页面的router-view写到了循环的导航里，导致导航有多少条，页面就加载了多少次

<el-tabs v-model="activeTab" type="border-card" v-if="activeMenuId && activeMenuId !== '1'">
            <el-tab-pane
              v-for="(menu,index) in subMenu"
              :key="menu.authId"
              :label="menu.authName"
              :name="String(index)"
            >
            <router-view></router-view>
            </el-tab-pane>        
          </el-tabs>

        解决方案也是real简单，只需要把router-view拿出来就没问题了

<el-tabs v-model="activeTab" type="border-card" v-if="activeMenuId && activeMenuId !== '1'">
            <el-tab-pane
              v-for="(menu,index) in subMenu"
              :key="menu.authId"
              :label="menu.authName"
              :name="String(index)"
            >
            </el-tab-pane>
            <router-view></router-view>
          </el-tabs>

        通过以上内容我们知道了完美解决vue mounted执行多次问题的方法。感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容，希望对大家有所帮助！引用本文内容时，请注明出处！谢谢合作！