先分析下生命周期

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?的更多相关文章

  1. vue获取后端数据放在created还是mounted方法里面?

    问题提出: 我们知道一般vue使用ajax或者axios来获取后端数据,并且好像放在created里面和mounted里面都可以获取数据并正确渲染.那么放在created里面和mounted里面有什么 ...

  2. VUE请求本地数据的配置json-server

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  3. vue 请求后台数据2(copy)

    https://blog.csdn.net/vergilgeekopen/article/details/68954940 需要引用vue-resource 安装请参考https://github.c ...

  4. 关于Vue实例的生命周期created和mounted的区别

    什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过 ...

  5. Vue实例的生命周期created和mounted的区别

    生命周期先上图 什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例 ...

  6. 常用vue请求交互数据方式

    几种 vue的数据交互形式 var that=this get请求 that.$http.get("1.txt").then(function(result){ console.l ...

  7. vue 请求后台数据 (copy)

    https://www.cnblogs.com/calledspeed001/p/7094494.html var that=this get请求 that.$http.get("1.txt ...

  8. vue学习生命周期(created和mounted区别)

    created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图(例如ajax请求列表). mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom ...

  9. vue实例中created、mounted以及其他类型说明

    生命周期图示(图片来自coderwhy老师): 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后 ...

随机推荐

  1. 【CSP2019】树上的数

    [CSP2019]树上的数 题面 洛谷 题解 我们设每个点上的编号分别为\(a_1,a_2...a_n\). 10pts ... 菊花 假设现在菊花中心编号是\(rt\),设你依次拆边\((p_1,r ...

  2. [LeetCode] 2. Add Two Numbers 两个数字相加

    You are given two non-empty linked lists representing two non-negative integers. The digits are stor ...

  3. 用Python搞定九宫格式的朋友圈。内附“马云”朋友圈

    PIL(Python Imaging Library)是一个非常强大的Python库,但是它支持Python2.X, 在Python3中则使用的是Pillow库,它是从PIL中fork出来的一个分支. ...

  4. 推荐一款移动端小视频App声咖视频

    推荐一款移动端小视频App声咖视频 1 介绍 声咖app,这款软件是一款声音交友社交软件,在上面你可以轻松互动,找到你的知心朋友,并且可以自由添加好友,与其他人互动,让交友更加轻松!, 2 特色功能介 ...

  5. candlestick用法

    import matplotlib.pyplot as plt   from matplotlib.dates import DateFormatter, WeekdayLocator, DayLoc ...

  6. ScheduledThreadPoolExecutor源码

    添加元素,先添加到数组末尾,然后上调整堆. 取对首元素,把最后一个元素放到0位置,然后下调整堆. 移除中间元素,把最后一个元素放到中间位置,然后下调整堆,下调整堆没动(已经是最大的),就在上调整堆.下 ...

  7. PG undo redo

    除了理所当前的各路文本记录(比方数据库的运行报错日志之类),PG的二进制类日志文件主要有两个,一个就是对应传统数据库理论的redo日志,理论上,所有数据的修改操作都会被记录到这个日志,在事务提交的时候 ...

  8. Centos7/Ubuntu 初始化硬盘分区、挂载

    刚刚在腾讯云买了一台服务器,刚买的服务器的数据盘都是需要自己来分区的,下面就记录一下操作. 通过命令fdisk-l查看硬盘信息 可以看到有两块硬盘/dev/vda和/dev/vdb,启动vda是系统盘 ...

  9. python 练习题:使用迭代查找一个list中最小和最大值,并返回一个tuple

    # -*- coding: utf-8 -*- # 请使用迭代查找一个list中最小和最大值,并返回一个tuple from collections import Iterable def findM ...

  10. linux系统下使用nginx反向代理asp.net core,并配置免费的https证书

    反向代理是为动态 Web 应用提供服务的常见设置. 反向代理终止 HTTP 请求,并将其转发到 ASP.NET Core 应用. 1.在asp.net core项目中的Startup的Configur ...