Vue.js 组件 `mounted` 在页面加载时触发两次

在本文中，我们将介绍Vue.js组件的生命周期钩子mounted在页面加载时为什么会触发两次的原因，并提供示例说明。

阅读更多：Vue.js 教程

`mounted`生命周期钩子

在Vue.js的组件生命周期中，mounted钩子函数是一个非常常用的方法。它在组件被挂载到DOM后执行，即组件模板已经渲染为真实的DOM元素并插入到页面中。

通常情况下，mounted钩子在页面加载时只会触发一次，但有些情况下会出现它触发两次的情况。下面我们将介绍可能导致mounted钩子触发两次的原因，并给出示例来解释。

可能的原因

1. Vue Devtools插件原因

在开发环境中，如果使用了Vue Devtools插件，在页面加载时，插件会主动触发Vue组件的mounted钩子。这就是为什么mounted钩子在页面加载时会触发两次的主要原因之一。

示例代码如下所示：

<template>
  <div>
    <h1>Hello Vue.js!</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log('mounted hook triggered');
  }
}
</script>

在这个示例中，当我们在开发环境中查看控制台时，会发现mounted钩子被触发了两次。其中一次是由Vue Devtools插件触发的。

2. 动态组件切换原因

当使用动态组件切换的时候，也有可能导致mounted钩子被触发两次。

示例代码如下所示：

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import FooComponent from './FooComponent.vue';
import BarComponent from './BarComponent.vue';

export default {
  components: {
    FooComponent,
    BarComponent
  },
  data() {
    return {
      currentComponent: 'FooComponent'
    }
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'FooComponent' ? 'BarComponent' : 'FooComponent';
    }
  },
  mounted() {
    console.log('mounted hook triggered');
  }
}
</script>

在这个示例中，当我们点击”Toggle Component”按钮切换组件时，mounted钩子会被触发两次。因为每次切换组件时，新的组件都会被挂载到DOM中，从而导致mounted钩子再次被触发。

解决方法

1. Vue Devtools插件问题的解决方法

解决Vue Devtools插件导致mounted钩子触发两次的办法很简单，只需要在关闭插件的情况下进行页面加载即可。

2. 动态组件切换问题的解决方法

对于动态组件切换导致mounted钩子触发两次的问题，可以通过在组件的beforeDestroy钩子中进行一些清理工作来解决。

示例代码如下所示：

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <component :is="currentComponent" v-if="componentMounted"></component>
  </div>
</template>

<script>
import FooComponent from './FooComponent.vue';
import BarComponent from './BarComponent.vue';

export default {
  components: {
    FooComponent,
    BarComponent
  },
  data() {
    return {
      currentComponent: 'FooComponent',
      componentMounted: true
    }
  },
  methods: {
    toggleComponent() {
      this.componentMounted = false;
      this.currentComponent = this.currentComponent === 'FooComponent' ? 'BarComponent' : 'FooComponent';
      this.$nextTick(() => {
        this.componentMounted = true;
      });
    }
  },
  mounted() {
    console.log('mounted hook triggered');
  },
  beforeDestroy() {
    console.log('component is about to be destroyed');
  }
}
</script>

在这个示例中，我们通过添加了一个名为componentMounted的data属性来控制组件是否被挂载。在进行组件切换时，我们先将componentMounted设置为false，然后切换组件，调用$nextTick方法将componentMounted设置为true。这样就可以防止mounted钩子多次触发了。