axios之Vue请求初始化数据放在Created还是Mounted？

Posted 2020-11-22 jianxian

先分析下生命周期

beforecreated：el 和 data 并未初始化 
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化 
mounted ：完成挂载

 

（1）mounted

　　很多人跟我说初始化放在Mounted里面， 我问她(他)们为什么？她(他)们回答说因为这个时候DOM初始化渲染好啦。然后我继续问DOM初始化渲染和请求初始化数据有什么关系？他们会说可以显示请求出来的数据啦。（大家觉得有冲突吗？）

DOM初始化渲染和请求初始化数据并没有什么冲突

　　让我们在看看前面的Vue生命周期

　　a、beforeCreate:
　　　　(在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。---官方贴的)

　　　　

 

 　　b、beforeMount:

　　　　(在挂载开始之前被调用：相关的 render 函数首次被调用。---官方贴的)

　　　　

 

 　　

看了这个2个我们继续分析：

我们请求回来的初始化数据或者基础数据是不是需要挂在Vue的Data上面？（是的，需要√）
然后我们继续beforeCreate的时候Data有没有生成？（答案是：没有。×）
--所以这一步是无法把数据挂到Vue的Data上面的
然后我继续看created的时候Data有没有生成？（答案是：生成啦。√）
--所以这一步我们是可以把数据挂到Vue的Data上面的,是不是可以放在这里啦？
--是的，可以放在这里啦。所以最后结论就是放在created里面。

 

补充分析：

（1）mounted

　　如果把所有请求放在created里面的话,请求过多会,加载太慢会导致页面出现短暂的白屏情况,一般上我写的话,接口不复杂会放created里面,接口多复杂的话会放在mounted里面.

（2）mounted

　　created 是加载DOM,html之后 就马上执行, 比如初始化,获取屏幕高度调整,赋值等等,而mounted就是执行包括js之后,准备开始调用方法,也就是说 类似传统开发那样,先加载jquery 再调用插件

 

 

 

.