Vue.js页面加载时，created和mounted哪个先执行？

本文共计1661个文字，预计阅读时间需要7分钟。

在Vue中，组件的生命周期包括两个关键阶段：`created` 和 `mounted`。

- `created` 阶段：在组件实例被创建之后，`data` 已经被设置，但此时DOM还未被渲染。在这个阶段，你可以执行一些数据相关的操作，但无法直接操作DOM。

- `mounted` 阶段：组件已经被挂载到DOM上，这时你可以访问并操作DOM元素。`mounted` 生命周期钩子是操作DOM的首选时机。

例如，如果你想在组件加载HTML模板之前执行一些操作，你可以在 `created` 钩子中编写代码。而在HTML渲染完成后，再在 `mounted` 钩子中执行后续操作。

补充知识：关于Vue子组件中 `data` 的选项，如果你在子组件中通过 `data` 选项定义了一个属性，并在父组件中通过属性绑定（props）将这个属性传递给子组件，你可以在子组件中直接使用这个属性。这样，父组件中这个属性的任何变化都会实时反映在子组件中。

created页面加载未渲染html之前执行。

mounted渲染html后再执行。

由于created在html模板生产之前所以无法对Dom进行操作而mounted可以。