页面加载时Vue组件mounted与beforeMount钩子触发两次问题排查

这种钩子重复触发的情况确实挺棘手的，尤其是只有单个页面出现异常的场景。结合Vue项目的常见踩坑点，我整理了几个可能导致Contact.vue钩子两次执行的原因，你可以逐一排查：

1. 路由配置存在重复或匹配异常 #

检查你的路由配置文件（比如router/index.js）：

• 有没有重复定义/contact相关的路由？比如同时存在path: '/contact'和path: '/contact/'（末尾带斜杠）的路由规则，导致路由被两次匹配。
• 是否在父路由的children里意外重复添加了Contact页面的路由？
• 路由守卫（如beforeEach）中有没有逻辑错误？比如不小心调用了两次next()，或者在某些条件分支下重复触发了路由跳转，导致页面被重新加载。

2. 组件被多次渲染挂载 #

排查组件的渲染上下文：

• 检查App.vue或全局布局组件中，是不是不小心写了两个<router-view>标签？这会导致所有路由页面都被渲染两次，但你只有Contact页面有问题，可能是Contact被额外引入了。
• 有没有其他组件（比如全局弹窗、侧边栏组件）中意外引入并渲染了Contact.vue？
• 查看Contact.vue的父组件中，是否有v-if搭配异步数据的逻辑，导致组件在数据加载前后被两次创建？比如父组件的v-if依赖一个异步获取的状态，状态更新时会触发组件的销毁和重建。

3. 全局混入或第三方插件的干扰 #

如果你的项目使用了全局混入（Vue.mixin）或者第三方插件（比如权限管理、埋点工具）：

• 检查这些全局代码中有没有修改组件生命周期的逻辑，比如在beforeMount或mounted钩子中触发了组件的重新渲染。
• 可以暂时禁用全局混入或第三方插件，看看问题是否消失，以此定位是否是外部代码导致的异常。

4. 异步组件加载的潜在问题 #

如果Contact.vue是通过异步方式加载的（比如() => import('./Contact.vue')）：

• 检查路由配置中异步组件的写法是否正确，有没有重复导入的情况？
• 确认是否有其他地方动态导入了Contact.vue，导致组件被多次实例化。

实用排查技巧 #

可以在Contact.vue的钩子函数中添加日志，帮助定位问题：

beforeMount() {
  console.log('beforeMount触发', this.$route.path, new Date().getTime(), this._uid);
},
mounted() {
  console.log('mounted触发', this.$route.path, new Date().getTime(), this._uid);
}

通过打印的_uid（组件唯一标识）可以判断是同一个组件实例触发两次钩子，还是两个不同的组件实例；结合时间戳和路由路径，也能区分是路由重复跳转还是组件重复渲染导致的问题。

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