Vue 中 created 与 mounted 哪个先执行

在 Vue 开发过程中，created 和 mounted 是两个非常重要的生命周期钩子函数。理解它们的执行顺序对于正确编写代码、处理数据和完成页面渲染等任务至关重要。

created 钩子函数在实例初始化之后，数据观测和 event/watcher 事件配置被创建之前被调用。这意味着在 created 函数中，我们可以访问到 data 中的数据，并且可以进行一些数据的初始化操作。比如，我们可以在这里发起网络请求获取数据，然后将其赋值给 data 中的变量。但是，在这个阶段，DOM 还没有被创建，所以无法对 DOM 进行任何操作。

而 mounted 钩子函数是在实例挂载到 DOM 上之后被调用。也就是说，在 mounted 函数中，我们已经可以访问到完整的 DOM 结构，能够对 DOM 进行各种操作，比如添加事件监听器、操作 DOM 元素的样式等。

那么，它们哪个先执行呢？答案是 created 先执行，然后才是 mounted。当一个 Vue 实例被创建时，首先会进入 created 阶段，执行 created 钩子函数中的代码。在完成数据观测和事件配置等一系列初始化操作后，才会将实例挂载到 DOM 上，进而触发 mounted 钩子函数。

我们可以通过一个简单的示例来验证这个顺序。在 created 钩子函数中添加一个 console.log('created')，在 mounted 钩子函数中添加一个 console.log('mounted')。运行项目后，在控制台中我们会先看到 'created'，然后才会看到'mounted'。

了解 created 和 mounted 的执行顺序，有助于我们在合适的阶段进行相应的操作。在需要进行数据初始化和逻辑处理时，可以使用 created；而在需要操作 DOM 时，则要在 mounted 中完成。合理利用这两个钩子函数，能够让我们的 Vue 应用开发更加高效和稳定。