问题：vue刷新页面mounted调用两次

回答：

在Vue.js中，mounted生命周期钩子函数是在组件被挂载到DOM后调用的。通常情况下，mounted只会被调用一次，但在某些情况下，可能会出现mounted被调用两次的情况。

造成mounted被调用两次的原因可能有以下几种：

1. Vue路由刷新：当使用Vue Router进行页面导航时，如果刷新页面，mounted会被调用两次。这是因为刷新页面会重新加载Vue实例，导致组件重新挂载到DOM上，从而触发mounted钩子函数。

解决方法：

- 可以使用created钩子函数代替mounted钩子函数来处理初始化逻辑，因为created在组件实例被创建之后立即调用，而不会受到页面刷新的影响。

- 如果需要在mounted中执行一些只需要执行一次的操作，可以使用一个标志位来判断是否已经执行过，避免重复执行。

2. 组件重用：当一个组件在不同的路由中被重用时，mounted会被调用多次。这是因为组件被复用时，每次复用都会重新挂载到DOM上，从而触发mounted钩子函数。

解决方法：

- 可以使用activated钩子函数代替mounted钩子函数来处理每次组件被激活时的逻辑，因为activated会在组件被复用时调用。

- 如果需要在mounted中执行一些只需要执行一次的操作，可以使用一个标志位来判断是否已经执行过，避免重复执行。

在Vue.js中，mounted生命周期钩子函数通常只会被调用一次，但在某些情况下，可能会出现调用两次的情况。这可能是由于页面刷新或组件重用导致的。为了避免重复执行逻辑，可以使用created或activated钩子函数来代替mounted，并使用标志位来判断是否已经执行过。

上一篇

vue动态组件强制刷新

下一篇

vue前端开发教程