vue为什么created会走两次

Vue 中的 created 钩子会走两次的主要原因有 1、组件复用 2、热重载（HMR） 3、错误配置。

一、组件复用

在 Vue 中，组件复用是一个常见的特性，当一个组件被复用时，生命周期钩子函数（如 created）会多次被调用。以下是一些常见的情况：

动态组件加载：如果在同一个视图中动态加载或卸载组件，可能会导致 created 钩子多次调用。
路由切换：在使用 Vue Router 时，切换路由可能会导致组件重新渲染，从而触发 created 钩子。
条件渲染：使用 v-if 或 v-for 指令时，条件变化或列表更新会导致组件重新创建。

示例代码：

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="toggleComponent">切换组件</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    }
  }
}
</script>

在上述示例中，切换 currentComponent 时会导致 ComponentA 和 ComponentB 的 created 钩子多次被调用。

二、热重载（HMR）

在开发环境中，Vue 的热重载功能（Hot Module Replacement，HMR）会在保存代码时自动更新页面，而不刷新整个页面。这意味着组件会被重新实例化，从而触发 created 钩子多次调用。

示例说明：

在开发过程中，每次保存文件时，HMR 会重新加载组件，导致 created 钩子多次执行。这是正常的开发行为，不会影响生产环境。

三、错误配置

有时候，错误的组件配置或重复引用也会导致 created 钩子多次调用。

常见错误配置：

重复引入组件：如果在父组件中多次引用同一个子组件，可能会导致 created 钩子多次调用。
不必要的重新渲染：不必要的状态更新或数据变化可能会导致组件重新渲染，从而触发 created 钩子。

示例代码：

<template>
  <div>
    <ChildComponent v-if="showChild"></ChildComponent>
    <button @click="toggleChild">切换子组件</button>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  data() {
    return {
      showChild: true
    };
  },
  methods: {
    toggleChild() {
      this.showChild = !this.showChild;
    }
  },
  components: {
    ChildComponent
  }
}
</script>

在上述示例中，每次切换 showChild 状态时，ChildComponent 的 created 钩子会被重新调用。

四、优化建议

为了避免 created 钩子被多次调用，可以考虑以下优化建议：

使用 v-show 代替 v-if：在不需要彻底销毁和重建组件时，使用 v-show 可以避免不必要的生命周期钩子调用。
避免不必要的状态更新：确保只有在必要时才更新状态或数据，以减少组件重新渲染的次数。
检查组件引用：确保组件在父组件中只被引用一次，避免重复引用。
使用 beforeDestroy 钩子进行清理：在组件销毁前进行必要的清理工作，确保不会因为组件复用导致多次调用。

示例代码：

<template>
  <div>
    <ChildComponent v-show="showChild"></ChildComponent>
    <button @click="toggleChild">切换子组件</button>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  data() {
    return {
      showChild: true
    };
  },
  methods: {
    toggleChild() {
      this.showChild = !this.showChild;
    }
  },
  components: {
    ChildComponent
  }
}
</script>

在上述优化示例中，使用 v-show 代替 v-if 可以避免 ChildComponent 被多次创建，从而减少 created 钩子的调用次数。

总结

总的来说，Vue 中 created 钩子被多次调用的原因主要包括组件复用、热重载以及错误配置。通过理解这些原因，并采取相应的优化措施，可以有效减少不必要的生命周期钩子调用，从而提升应用性能和开发效率。为了更好地管理组件生命周期，开发者应当深入理解 Vue 的生命周期钩子，并在实际项目中灵活运用。

vue为什么created会走两次

一、组件复用

二、热重载（HMR）

三、错误配置

四、优化建议

总结

相关问答FAQs：

发表回复