Vue 中 cre会被调用两次热重载created 被调用两次会对应用产生什么影响
Vue 中 created 钩子为什么会被调用两次？
在 Vue 中，created 钩子通常只会在组件实例创建后调用一次。但有时候，你可能会发现它竟然被调用了两次。这主要有三个原因：组件复用、热重载（HMR）和错误配置。
一、组件复用
组件复用是 Vue 的一个强大功能，但这也可能导致生命周期钩子被多次调用。以下是一些常见的情况：
- 动态组件加载：比如，在同一视图中动态加载或卸载组件。
- 路由切换：使用 Vue Router 切换路由时，可能会导致组件重新渲染。
- 条件渲染：使用 v-if 或 v-show 指令时，条件变化或列表更新会导致组件重新创建。
举个例子，如果你在一个 v-if 指令中使用了组件，切换条件时，created 钩子就会被多次调用。
二、热重载（HMR）
在开发时，Vue 的 HMR 功能会在保存代码时自动更新页面。这就意味着组件会被重新实例化，导致 created 钩子多次调用。这是开发过程中的正常行为，不会影响生产环境。
三、错误配置
有时候，错误的组件配置或重复引用也会导致 created 钩子多次调用。比如：
- 重复引入组件：在父组件中多次引用同一个子组件。
- 不必要的重新渲染：不必要的状态更新或数据变化可能导致组件重新渲染。
比如，如果每次切换一个状态时，created 钩子都会被重新调用，这可能是由于配置错误导致的。
四、优化建议
为了避免 created 钩子被多次调用，你可以考虑以下建议：
- 使用 functional 函数组件：在不需要彻底销毁和重建组件时，使用 functional 可以避免不必要的生命周期钩子调用。
- 避免不必要的状态更新：确保只在必要时更新状态或数据，减少组件重新渲染的次数。
- 检查组件引用：确保组件在父组件中只被引用一次，避免重复引用。
- 使用 beforeDestroy 钩子进行清理：在组件销毁前进行必要的清理工作，确保不会因为组件复用导致多次调用。
例如，使用 functional 函数组件代替普通的函数组件，可以避免 created 钩子被多次创建，从而减少钩子的调用次数。
Vue 中 created 钩子被多次调用的原因主要包括组件复用、热重载以及错误配置。通过理解这些原因，并采取相应的优化措施，可以有效减少不必要的生命周期钩子调用，提升应用性能和开发效率。
相关问答（FAQs）
1. 为什么 Vue 的 created 钩子会被调用两次？
常见的原因包括组件被重新渲染、组件被销毁后重新创建，或者使用 Vue Devtools 调试导致的。
2. 如何避免 Vue 的 created 被调用两次？
可以通过检查组件是否被重新渲染、避免组件被销毁后重新创建，或者关闭 Vue Devtools 工具来避免 created 被调用两次。
3. created 被调用两次会对应用产生什么影响？
虽然不会对应用产生严重影响，但可能会影响性能和数据状态的一致性。因此，我们应该尽量避免 created 被调用两次。