vue里为什么所有页面的created钩子都执行了两次?

下图是我的router配置,均只有一层扁平化的,除了app.vue的created钩子只执行了一次,整个项目的其他所有页面的created生命周期都各自执行了两次(项目用到了mint-ui的tab组件,不知道是否和这个有关)

图片描述

该如何解决才能让created只执行一次?它已经导致了很多获取数据的接口重复调用

阅读 26.1k
7 个回答

我也遇到过这个问题,这不是路由问题,路由不会引起钩子函数重复执行。
重复执行的可能情况:
1、组件更新
组件更新可能有以下可能:

  • v-if里的组件是一个子组件(子组件里可能有对父组件部分数据影响的可能,这就是我遇到的问题。我的子组件嵌套了多个层级组件,很复杂。解决办法: v-if修改为v-show或者合并组件)
  • 该组件或者嵌套的子组件存在Vue.mixin

代码真是太少了 不要用图片代替代码,会被踩的~

我没遇到过这种问题,你只能等遇到过同样问题的人来答,因为从你的描述跟一张图片就能找到问题原因的可能性为零

把你mint-ui 版本升级一下 可能是它和vue的构建有重叠问题
还有你created钩子执行相同逻辑俩次? 触发时间节点也类似一致?

找到问题的原因了,不止是created被执行了两次,是整个生命周期的钩子全都被执行了两次。原因是使用了mint-ui的tab组件导致了有重复的路由挂载(可能是我使用的姿势不对··),以及重复声明了vue的全局实例。删除多余的全局vue实例,正确使用tab组件即可

新手上路,请多包涵

<div id="app"> id="app" 和 index.html 的id 重复导致

新手上路,请多包涵

你的 tab组件 的子组件 是不是用 v-for循环了? 被循环的组件内又写了 <router-view>? 你试试多加一个tab

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题