页面引入组件时mounted钩子被调用两次，需实现仅执行一次

我之前也碰到过类似的情况，结合你的代码和常见的Vue开发坑，给你梳理下可能的原因和对应的解决办法：

先定位问题根源 #

首先得明确是父组件的mounted被调用两次，还是子组件LoginSignupModal的mounted触发了两次？建议你在LoginSignupModal的mounted钩子中也加一行console.log('Modal mounted')，先搞清楚问题出在父组件还是子组件上——这一步能帮你快速缩小排查范围。

常见原因及修复方案 #

1. 开发环境的热重载/根实例重复挂载 #

Vue在开发模式下，热更新机制或者根实例重复初始化可能会导致这个问题：

• 检查你的入口文件（比如main.js），是不是不小心写了两次new Vue({...}).$mount('#app')？如果有，删掉重复的那行即可。
• 另外，Vue DevTools的某些功能（比如性能检测）偶尔也会触发意外的重渲染，你可以暂时关闭DevTools再刷新页面，看看会不会恢复正常。

2. 组件被多次渲染或注册 #

看看你的代码里有没有重复引入/注册LoginSignupModal：

• 父组件模板里你只写了一次组件标签，但有没有在全局注册了这个组件后，又在父组件的components选项里再次注册？虽然这一般不会导致重复挂载，但可以试试去掉局部注册，只保留全局或者只保留局部注册试试。
• 同时检查路由配置，是不是同一个页面路由被注册了两次？或者路由守卫里有没有导致页面重复渲染的逻辑？

3. 用标志位兜底（最稳妥的临时方案） #

如果暂时找不到根本原因，可以给组件加个状态标志，确保mounted里的代码只执行一次：

import axios from '~/plugins/axios';
export default {
  data() {
    return {
      isMountedCompleted: false // 新增标志位
    };
  },
  components: { LoginSignupModal },
  mounted() {
    if (!this.isMountedCompleted) {
      this.isMountedCompleted = true;
      console.log('mounted called......');
      // 把你的业务逻辑（比如axios请求、初始化操作）放在这里
    }
  }
}

这个方法不管是什么原因导致的重复挂载，都能保证关键代码只跑一次，适合紧急修复场景。

4. Vue3的Teleport坑（如果使用Vue3） #

如果你的Modal组件用了<Teleport>，开发环境下热更新可能会导致Teleport的内容被重复添加到目标元素里。这时候可以给Teleport的目标元素加个唯一ID，或者在组件卸载时手动清理Teleport的内容，也可以用disabled属性控制Teleport的渲染时机。

5. Vue2的模板结构问题 #

在Vue2中，如果组件模板没有唯一的根节点，Vue会自动包裹一个div，但有时候这种自动处理可能导致意外的重复渲染。检查下LoginSignupModal组件的模板，确保它有唯一的根元素（比如外层包一个div）。

总结 #

先定位是父组件还是子组件的问题，然后从根实例挂载、组件注册、路由配置这些方面逐步排查。如果实在找不到根本原因，用标志位的方法兜底是最稳妥的。一般来说，开发环境的重复挂载问题在生产环境打包后会自动消失，但如果生产环境也出现，就要仔细检查代码里的重复渲染逻辑了。

内容的提问来源于stack exchange，提问作者Abhi Thakkar