异步请求数据,但是生命周期函数也是异步的,怎么才能保证渲染之前就能拿到数据呢?

官方给了两种方案,

我们可以在异步获取数据的时候加上一个loading表示现在在获取数据.....

由于ajax是异步操作,vue不能保证在渲染之前拿到数据,vue能做的是初始化页面隐藏,拿到数据再显示。

根据需求,我们可以在created,beforeCreate的时候调用接口获取数据,在成功拿到数据之后的回调函数里面,控制页面显示,这样可以最大程度上避免页面跳动的问题。这样渲染和请求是异步的,等到请求回来之后再把页面放出来(v-if)。

vue在渲染之前拿到数据操作.......vue数据获取的更多相关文章

  1. VUE 路由参数改变重新刷新数据

    VUE 路由参数改变重新刷新数据 App.vue 里面使用路由,然后通过App.vue文件中的搜索功能搜索刷新路由文件中的列表. 修改 index.js 文件 首先在路由文件 index.js 文件中 ...

  2. vue music-抓取歌单列表数据(渲染轮播图)

    下载安装新依赖 babel-runtime:对es6语法进行转译 fastclick:对移动端进行点击300毫秒延迟 ,,取消掉 babel-polyfill:API 先添加,在npm install ...

  3. vue 动态渲染数据很慢或不渲染

    vue 动态渲染数据很慢或不渲染 原因是因为vue检测速度很慢,因为多层循环了,在VUE 2.x的时候还能渲染出来,1.x的时候压根渲染不出来.解决方式:在动态改变数据的方法,第一行加上 this.$ ...

  4. Vue 列表渲染及条件渲染实战

    条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue 帮我们提供了一个v-if的指 ...

  5. Vue nodejs商城项目- 前后端数据传递

    .利用Mongoose查询MongoDB 通过mongoose插件可以简捷地从mondodb中获取数据,首先安装mongoose: cnpm install mongoose --save   使用m ...

  6. vue源码之响应式数据

    分析vue是如何实现数据响应的. 前记 现在回顾一下看数据响应的原因. 之前看了vuex和vue-i18n的源码, 他们都有自己内部的vm, 也就是vue实例. 使用的都是vue的响应式数据特性及$w ...

  7. 二、Vue 页面渲染过程

    前言 上篇博文我们依葫芦画瓢已经将hello world 展现在界面上啦,但是是不是感觉新虚虚的,总觉得这么多文件,项目怎么就启动起来了呢?怎么访问到8080 端口就能进入到我们的首页呢.整个的流程是 ...

  8. 14、VUE服务器渲染

    1.HTML的渲染方式 1.1. 浏览器本地渲染 这种方式不会被搜索引擎获取内容,所以不利于网站的推广. 因为浏览器本地渲染是页面js通过发送ajax请求获取后台的json数据,然后生成页面内容. 爬 ...

  9. vue服务器端渲染指南研究

    什么是服务器端渲染(SSR)? Vue.js 是构建客户端应用程序的框架.默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM.然而,也可以将同一个组件渲染为服务器端的 HT ...

随机推荐

  1. Spring MVC使用ModelAndView进行重定向(转)

    1.Servlet重定向forward与redirect: 使用servlet重定向有两种方式,一种是forward,另一种就是redirect.forward是服务器内部重定向,客户端并不知道服务器 ...

  2. python 布尔值索引

  3. Leetcode2.Add Two Numbers两数相加

    给定两个非空链表来表示两个非负整数.位数按照逆序方式存储,它们的每个节点只存储单个数字.将两数相加返回一个新的链表. 你可以假设除了数字 0 之外,这两个数字都不会以零开头. 示例: 输入:(2 -& ...

  4. Sublime中输入中文的解决方案

    之前系统用的输入法是 ibus,在sublime中无法使用, 可能是不支持该输入法. 然后改用 fcitx,切换输入法之后要重启系统才可以生效, 启动之后就可以使用中文了.

  5. WCF ChannelFactory

    public static class WcfExtensions{    public static void Using<T>(this T client, Action<T&g ...

  6. Linux安装mongoDB步骤和方法

    Linux安装mongoDB步骤和方法 下载mongoDB数据库 mongodb-linux-x86_64-3.0.15.tgz 存放到linux文件夹中 ftp软件直接拖上去 解压文件夹(解压后,会 ...

  7. 2019-8-31-msbuild-项目文件常用判断条件

    title author date CreateTime categories msbuild 项目文件常用判断条件 lindexi 2019-08-31 16:55:59 +0800 2019-7- ...

  8. python 使用异常代替返回状态码

  9. oracle函数的分类

    v  单行函数:对每一行输入值进行计算,得到相应的计算结果,返回给用户,也就是说,每行作为一个输入参数,经过函数计算得到每行的计算结果. 比如select length(ename) from emp ...

  10. 【NS2】有线和无线混合场景 (转载)

    1. 创建简单的有线-无线混合场景 上一节建立的无线仿真可以支持多跳adhoc网络或wirelesslan.但是,我们可能需要对经过有线网络连接的多个无线网络进行仿真,或者说我们需要对有线-无线混合网 ...