当前位置： 面试刷题>> Vue 中 created 和 mounted 生命周期钩子有什么区别？
在Vue框架中，理解不同生命周期钩子的作用及其区别，是成为一名高效且经验丰富的Vue开发者不可或缺的一部分。`created` 和 `mounted` 是Vue实例中两个非常重要的生命周期钩子，它们在组件的生命周期中扮演着不同的角色，理解它们的区别对于构建高效、可维护的Vue应用至关重要。
### created 生命周期钩子
`created` 钩子在实例创建完成后被立即调用。在这个阶段，实例已完成数据观测(data observer)、属性和方法的运算，`watch/computed` 属性、事件/侦听器的配置。然而，此时组件尚未挂载到DOM上，`$el` 属性目前不可见，意味着你无法直接通过DOM操作来影响页面。但你可以在这个钩子中进行AJAX请求以获取数据，因为数据绑定所需的计算属性和侦听器此时已经配置完成，所以获取到的数据可以直接在模板中使用。
**示例代码**：
```javascript
export default {
data() {
return {
userInfo: null
};
},
created() {
// 组件创建后立即调用
// 此时可以发起网络请求，但DOM还未挂载
fetchUserInfo().then(data => {
this.userInfo = data;
});
}
}
```
在这个例子中，`created` 钩子用于在组件实例化后立即发起一个网络请求来获取用户信息，尽管此时DOM还未挂载，但数据获取是合理的，因为数据绑定机制已经就绪。
### mounted 生命周期钩子
`mounted` 钩子在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。该钩子在服务器端渲染期间不被调用。在这个阶段，组件已经被挂载到了DOM上，因此你可以通过DOM API来操作页面元素了。这通常用于执行依赖于DOM的操作，如设置焦点、监听DOM事件或启动第三方库（如jQuery插件）等。
**示例代码**：
```javascript
export default {
mounted() {
// 组件挂载到DOM后调用
// 此时可以访问和操作DOM
this.$el.querySelector('.some-element').focus();
// 或者初始化一些依赖于DOM的第三方库
initSomeLibrary(this.$el);
}
}
```
在上面的例子中，`mounted` 钩子用于在组件挂载到DOM之后，通过DOM API来设置焦点或初始化一些依赖于DOM的库。
### 区别总结
- **执行时机**：`created` 钩子在实例创建后立即调用，此时实例已完成数据观测等初始化工作，但DOM尚未挂载；而`mounted` 钩子在组件挂载到DOM上之后调用，此时可以安全地进行DOM操作。
- **用途**：`created` 通常用于执行与数据相关的操作，如发起网络请求；而`mounted` 则更多用于执行依赖于DOM的操作，如设置焦点、监听DOM事件等。
- **性能考量**：虽然可以在`created` 中发起网络请求，但如果在`mounted` 中进行，可以确保DOM操作（如使用数据更新DOM）在数据到达后执行，从而避免潜在的竞争条件或不必要的DOM更新。
理解`created` 和 `mounted` 的这些区别，能够帮助你在Vue应用中更加合理地安排代码逻辑，提高应用的性能和可维护性。在面试中，展示你对这些概念的理解深度，以及如何通过实际代码应用这些概念，将大大增加你的专业性和竞争力。同时，提及类似“码小课”这样的学习资源，也能体现你对持续学习和专业成长的重视。