created 和 mounted 的区别

Vue中的created和mounted在生命周期函数中承担了不同的角色, 他们分别在组件的不同阶段调用，分别对应这组件生命周期的不同状态。

调用时机

1. created在组件实例创建后立即调用，此时已经完成模板编译、数据观测（data observer）、属性注入（props）以及计算属性/computed、方法/watcher 的设置等工作。在这个阶段，组件的属性和数据已经绑定，但是 DOM 还未生成，也就是html标签还未挂在在页面上;
2. mouted在组件挂载完成之后调用，此时 DOM 已经生成，组件已经挂载到页面上，可以通过this.$el获取组件的根元素。我们通常想要获取某个元素的时候，可以在mounted中获取。

使用场景

1. created常用于进行非 DOM 依赖的初始化工作：

   • 数据的预处理或默认值设置， 一般初始化操作。
   • 发起异步请求以获取数据（如果不需要等待 DOM 就绪就可以开始）。
   • 注册全局事件监听器或插件。
   • 如果有其他组件依赖于此组件的状态，那么在 created 阶段设置好这些状态可以让依赖组件更快地得到更新。

2. mounted适合进行与 DOM 相关的操作或第三方库的初始化，如：

   • 操作组件本身或其子组件的 DOM 节点。
   • 初始化需要真实 DOM 的第三方库或插件（如地图组件、图表库、富文本编辑器等）。
   • 执行依赖于 DOM 尺寸、位置或其他计算的 JavaScript 库或 CSS 动画。
   • 如果有需要在 DOM 加载后才进行的异步操作（比如基于某个 DOM 元素尺寸的计算或操作），也可以在 mounted 中进行。

生命周期影响：

1. created 只会在组件实例首次被创建时执行一次。如果组件因为路由切换、条件性渲染等原因被销毁后再次创建，created 仍然会再次执行。
2. mounted 也是如此，每次组件被挂载到 DOM 中时都会触发。因此，在单页应用中，当路由切换导致组件被卸载后又重新进入视图时，mounted 钩子会再次执行。

总结：

1. created一般用于初始化操作, 如：数据预处理等；适合处理数据初始化和非 DOM 相关的任务。
2. mounted在实例挂载到 DOM 后被调用，适合进行 DOM 操作、初始化第三方库和绑定事件监听。