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

在本文中，我们将介绍Vue.js中的一个特性，即组件的mounted生命周期钩子在页面加载时会触发两次的现象，并提供解决方法。

问题描述

当我们在Vue.js中使用组件时，通常会用到组件的生命周期钩子。其中一个常用的钩子是mounted，它在组件被挂载到DOM后执行。然而，有时候我们会发现，在页面加载时，mounted钩子会被触发两次，这可能会导致我们的代码重复执行，或者产生其他不良的副作用。

原因分析

造成mounted钩子触发两次的原因通常有以下几种情况：

组件在页面加载后被销毁并重新渲染
这种情况下，组件的mounted钩子会在组件第一次被挂载到DOM后触发，然后重新渲染后又会被触发一次。
组件内部使用了v-if或v-show等条件渲染指令
当使用条件渲染指令时，Vue.js会在mounted钩子触发后，检查组件的显示状态。如果条件发生改变，组件会被销毁并重新渲染，导致mounted钩子再次触发。
父组件更新导致子组件重新渲染
当父组件发生变化时，子组件可能会重新渲染。在子组件被重新渲染时，mounted钩子也会再次触发。

解决方案

根据不同的情况，我们可以采取以下解决方案来避免mounted钩子被触发两次的问题：

使用created钩子代替mounted钩子
如果我们不需要在组件被挂载到DOM后进行DOM操作，而只需要在组件创建后进行一些初始化操作，可以将逻辑放在created钩子中。created钩子在组件实例被创建之后立即调用，而不是等到挂载阶段。
使用v-cloak指令或v-show代替v-if
如果我们在组件内部使用了条件渲染指令，可以考虑使用v-cloak指令或将条件判断放在v-show属性中。这样可以避免组件被销毁和重新渲染，从而减少mounted钩子的触发次数。
合理使用key属性
在父组件中使用子组件时，给子组件添加key属性可以确保每次父组件更新时都会重新渲染子组件。但需要注意，使用key属性可能会导致组件的状态丢失，所以在使用时要谨慎权衡。

下面是一个示例代码，演示如何在不触发两次mounted钩子的情况下更新组件：

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <div v-if="displayComponent" :key="componentKey">
      <my-component></my-component>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      displayComponent: true,
      componentKey: 0,
    };
  },
  methods: {
    toggleComponent() {
      this.displayComponent = !this.displayComponent;
      this.componentKey += 1;
    },
  },
};
</script>

在上述代码中，我们通过点击按钮来切换displayComponent的值，从而触发条件渲染。每次切换时，我们还增加了componentKey的值，确保组件每次都会重新渲染。

总结

在Vue.js中，组件的mounted生命周期钩子有时会在页面加载时触发两次。我们可以通过使用created钩子、合理使用条件渲染指令以及设置key属性的方式来避免触发两次mounted钩子，并确保组件的正常运行。在开发过程中，我们应根据具体情况选择合适的解决方案，以提高代码的可维护性和性能。