前端每日一练：Vue 中 created 和 mounted 生命周期的区别及使用场景详解

在 Vue.js 中，组件的生命周期钩子函数是非常重要的，它们允许我们在组件不同的生命周期阶段执行特定的逻辑。其中，created 和 mounted 生命周期钩子是常用且常被混淆的两个阶段。本文将详细介绍这两个生命周期钩子的区别及使用场景。

created 生命周期钩子

created 生命周期钩子在组件实例被创建之后立即被调用，此时组件的实例已经创建完成，但它的模板还未渲染到 DOM 中。因此，在 created 钩子中无法访问到已经渲染的 DOM 元素。

使用场景

• 数据的初始化：在 created 钩子中可以对组件的数据进行初始化操作，例如对数据进行赋值、计算或者从服务端获取初始数据。
• 设置初始状态：可以在 created 钩子中设置组件的初始状态，例如对组件的状态属性进行初始化设置。
• 执行异步请求：在 created 钩子中可以进行异步操作，例如从服务端获取数据。由于此时组件实例已经创建，因此可以在获取到数据后执行相应的逻辑。

mounted 生命周期钩子

mounted 生命周期钩子在组件的模板已经渲染到 DOM 中后触发，此时可以访问和操作已经渲染的 DOM 元素。

使用场景

• 操作 DOM 元素：mounted 钩子通常用于执行需要操作 DOM 元素的任务，例如修改元素的样式、添加事件监听器、或者执行其他与 DOM 相关的操作。
• 执行与 DOM 相关的逻辑：在 mounted 钩子中可以执行需要等待 DOM 渲染完成后才能执行的任务，以确保可以操作已经存在的 DOM 元素。

总结

• created 生命周期钩子在组件实例被创建后立即执行，适合进行数据初始化、设置初始状态和执行异步请求等任务。
• mounted 生命周期钩子在组件模板渲染到 DOM 后触发，适合操作已经渲染的 DOM 元素和执行与 DOM 相关的逻辑。

综上所述，了解 created 和 mounted 生命周期钩子的区别及适用场景，有助于我们合理地利用这两个生命周期，提高组件的性能和开发效率。