Vue 初始化获取数据应该放到 Created 还是 Mounted 中？

Vue 初始化获取数据应该放到 Created 还是 Mounted 中？

以下片段摘自官方文档

created：

在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。

mounted：

实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。

注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick。

分析

按理来说，用created和mounted获取后端初始化数据能达到的效果是一致的，只不过使用mounted时，显示的数据有可能是页面渲染完成后，页面的响应式效果将数据显示在页面中；而created是获取到数据再渲染到页面中。所以将数据初始化放到created中的话，逻辑上是比较合适的。

但并不是说，这是一种绝对的操作，数据初始化就一定要写死在created中。比如说你需要用到dom操作：使用echarts时，如果你将数据获取放在了created的话，它会有出现无数据的情况（有时候确实又有数据），那时由于在用echarts钩子的时候,需要用ref获取dom元素，在dom初始化之前调用ref是无法获取到的。在使用echarts的时候，获取数据是需要写到mounted中的。

还有一种情况就是，created中放了很多同步代码或者一个需要执行很长很长时间的数据获取代码的话，会出现打开页面白屏很长的时间（什么都不显示），这对用户体验来说，是十分不友好的，用户可能会认为你的服务器烂到爆炸。所以当有初始化数据执行时间长的同步方法，是推荐放到mounted中的。