Vue中created与mounted区别 ？
参考回答
在 Vue 中，created 和 mounted 都是生命周期钩子函数，用于在不同的生命周期阶段执行代码。它们的主要区别在于它们触发的时机和可以访问的内容：
created：- 触发时机：在 Vue 实例创建后，数据观测和事件配置完成后，但 DOM 元素尚未挂载到页面上。
- 可以访问的内容：可以访问到数据、计算属性和方法，但此时组件的 DOM 还没有生成，所以不能访问 DOM 元素。
mounted：- 触发时机：在 Vue 实例的 DOM 挂载完成后，即所有的模板渲染和 DOM 更新都完成后。
- 可以访问的内容：此时组件的 DOM 已经生成，可以访问和操作 DOM 元素。
详细讲解与拓展
created钩子：created是 Vue 生命周期的早期钩子，通常在这个阶段，我们用它来做一些初始化工作，如获取数据、设置默认值、调用 API 等操作。- 由于此时组件的 DOM 还没有生成，所以不能直接操作 DOM。
created钩子主要用于初始化组件的数据和逻辑。
例子：
new Vue({ data() { return { message: 'Hello, World!' }; }, created() { console.log('Created hook triggered'); // 数据已经被初始化，但 DOM 尚未挂载 } });在这个例子中，
created钩子被用来在 Vue 实例创建时打印一条消息。你可以在这个钩子中访问数据message，但不能直接操作 DOM。-
mounted钩子：mounted是 Vue 生命周期中更晚触发的钩子，它会在 DOM 完成挂载后触发，因此可以安全地在这个钩子中操作 DOM 元素。常用于进行一些与 DOM 相关的操作，如设置事件监听器、初始化第三方库等。- 在
mounted钩子中，Vue 会确保所有的模板已经渲染并且 DOM 元素已经插入到页面中，可以通过this.$el访问到组件的根 DOM 元素。
例子：
new Vue({ data() { return { message: 'Hello, Vue!' }; }, mounted() { console.log('Mounted hook triggered'); console.log(this.$el); // 可以访问 DOM 元素 } });在这个例子中，
mounted钩子会在 DOM 挂载完成后被调用，并且通过this.$el可以访问组件的根 DOM 元素。 -
区别总结：
created：在实例创建时调用，数据已经初始化，但 DOM 尚未挂载，因此不能直接访问 DOM。mounted：在 DOM 挂载完成后调用，可以访问到 DOM 元素并执行与 DOM 相关的操作。
举例说明：
假设你需要在组件创建后从服务器获取数据并显示，适合使用 created，因为你可以在此时发起 API 请求，并确保数据准备好。
new Vue({
created() {
fetchData().then(data => {
this.items = data;
});
}
});
如果你需要在数据加载完毕后，某些 DOM 元素完成渲染后执行某些操作，适合使用 mounted，例如操作某个 DOM 元素的样式或事件。
new Vue({
mounted() {
this.$el.querySelector('button').focus();
}
});
总结
created：适用于在 Vue 实例创建后做初始化工作，如数据获取、事件配置等，但不能操作 DOM。mounted：适用于在组件渲染和 DOM 挂载完成后执行操作，如直接操作 DOM 或绑定事件。