Vue 中 created 和 mounted 的区别在于执行时间和数据访问能力:created:组件初始化时调用,只能访问 Vue 实例数据,不可与 DOM 交互。mounted:DOM 挂载后调用,可访问 Vue 实例数据和 DOM 元素,可以与 DOM 交互。

Vue 中 created 和 mounted 的区别
在 Vue 组件的生命周期中,created 和 mounted 是两个至关重要的钩子函数。它们用于在组件的不同阶段执行特定任务,但它们在执行时间和可用性方面存在一些关键差异。
创建(created)
- 在
new Vue()实例化或调用this.$mount()方法时立即调用。 - 只能访问 Vue 实例的数据(
this.data)。 - 此时 DOM 还没有渲染,因此无法与 DOM 元素进行交互。
加载(mounted)
立即学习“前端免费学习笔记(深入)”;
- 在 DOM 挂载后立即调用。
- 除了 Vue 实例数据外,还可以访问 DOM 元素(
this.$el)。 - 可以与 DOM 元素进行交互,例如操纵样式、添加事件监听器或进行 DOM 查询。
总结
| 特征 | created | mounted |
|---|---|---|
| 执行时间 | 组件初始化时 | DOM 挂载后 |
| 数据访问 | Vue 实例数据 | Vue 实例数据和 DOM 元素 |
| DOM 交互 | 否 | 是 |
总结来说,created 用于在组件初始化阶段执行与数据相关的任务,而 mounted 用于在组件加载后执行与 DOM 相关的任务。










