axios之Vue请求初始化数据放在Created还是Mounted?
先分析下生命周期
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 再调用插件
.
axios之Vue请求初始化数据放在Created还是Mounted?的更多相关文章
- vue获取后端数据放在created还是mounted方法里面?
问题提出: 我们知道一般vue使用ajax或者axios来获取后端数据,并且好像放在created里面和mounted里面都可以获取数据并正确渲染.那么放在created里面和mounted里面有什么 ...
- VUE请求本地数据的配置json-server
VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...
- vue 请求后台数据2(copy)
https://blog.csdn.net/vergilgeekopen/article/details/68954940 需要引用vue-resource 安装请参考https://github.c ...
- 关于Vue实例的生命周期created和mounted的区别
什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过 ...
- Vue实例的生命周期created和mounted的区别
生命周期先上图 什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例 ...
- 常用vue请求交互数据方式
几种 vue的数据交互形式 var that=this get请求 that.$http.get("1.txt").then(function(result){ console.l ...
- vue 请求后台数据 (copy)
https://www.cnblogs.com/calledspeed001/p/7094494.html var that=this get请求 that.$http.get("1.txt ...
- vue学习生命周期(created和mounted区别)
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图(例如ajax请求列表). mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom ...
- vue实例中created、mounted以及其他类型说明
生命周期图示(图片来自coderwhy老师): 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后 ...
随机推荐
- Python--单元四练习
一.算24 描述: 给出4个小于10的正整数,可以使用加.减.乘.除4种运算以及括号把4个数连接起来得到一个表达式.现在问题是,是否存在一种方式使得所得表达式的结果等于24. ...
- 2020年数据库概念与MySQL的安装与配置-从零基础入门MySQL-mysql8版本
作者 | Jeskson 来源 | 达达前端小酒馆 从零基础入门MySQL数据库基础课 数据的概念,简介,安装与配置,Windows平台下MySQL的安装与配置. 数据库的概念:数据库是一个用来存放数 ...
- Spring Cloud Zuul记录接口响应数据
系统在生产环境出现问题时,排查问题最好的方式就是查看日志了,日志的记录尽量详细,这样你才能快速定位问题. 如果需要在Zuul中进行详细的日志记录,这两种日志必不可少. API请求信息 API响应信息 ...
- dskms改为ckplayer播放器
将ckplayer代码文件夹上传到/var/www/html/public/static/plugins/目录下修改/var/www/html/application/home/view/defaul ...
- classLoader双亲委托与类加载隔离
虽然前面把class文件的产生到加载使用流程说了一遍,但是还是想具体看看classLoader的双亲委托具体是如何运行的,有什么利弊. 还有想看看不同类加载器的不同命名空间带来那些好处和实际有那些应用 ...
- 第25课 std::thread对象的析构
一. 线程的等待与分离 (一)join和detach函数 1. 线程等待:join() (1)等待子线程结束,调用线程处于阻塞模式. (2)join()执行完成之后,底层线程id被设置为0,即join ...
- no main manifest attribute, in testProject-1.0-SNAPSHOT.jar
no main manifest attribute, in testProject-1.0-SNAPSHOT.jar 错误描述: no main manifest attribute, in tes ...
- vue-v-xxx基于 Vue拓展的 v-xxx 库
君问归期未有期,巴山夜雨涨秋池. 何当共剪西窗烛,却话巴山夜雨时. 作为vue轻车熟路的老司机,经常会用到一些指令,vue官方提供的指令又太少,无法满足旺盛的欲望,而每次要写一遍,终日郁郁寡欢,从小就 ...
- .net core (领域事件,并发 for update) 工作内容记录
这周工作,因为要对几个不同的表进行货币增加,锁定,所以 用了领域事件和并发 for update ,先记录一下 领域事件 ,Dapper 事务 ,sql for update 这几个点 头大,最近工 ...
- 2019-11-29-WPF-高性能笔
原文:2019-11-29-WPF-高性能笔 title author date CreateTime categories WPF 高性能笔 lindexi 2019-11-29 10:20:51 ...