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

官方给了两种方案,

我们可以在异步获取数据的时候加上一个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. PHP生成短连接的方法

    PHP生成短连接的方法.md PHP生成短连接的方法 直接贴上方法,函数可以查看手册. <?php /** 生成短网址 * @param String $url 原网址 * @return St ...

  2. [Vue CLI 3] 配置 webpack-bundle-analyzer 插件

    首先还是简单介绍一下 webpack-bundle-analyzer 是做什么的: Visualize size of webpack output files with an interactive ...

  3. [J2EE规范]JDBC简单例子 标签: 数据库j2eejdbcjava 2017-06-29 10:55 353人阅读 评论(12)

    JDBC是什么? JDBC是java数据库连接(Java Database Connectivity),它是用于java编程语言和数据库之间的数据库无关连接的标准Java API,就是说,JDBC是用 ...

  4. Leetcode925.Long Pressed Name长按键入

    你的朋友正在使用键盘输入他的名字 name.偶尔,在键入字符 c 时,按键可能会被长按,而字符可能被输入 1 次或多次. 你将会检查键盘输入的字符 typed.如果它对应的可能是你的朋友的名字(其中一 ...

  5. python中map、reduce函数

    map函数: 接受一个函数 f 和一个 list .格式:map( f , L),对L中的每个元素,进行f(x)的一个操作. 例如,对于list [1, 2, 3, 4, 5, 6, 7, 8, 9] ...

  6. Spring 配置标签——util标签

    Spring 配置标签——util标签     一.配置applicationContext.xml <beans xmlns="http://www.springframework. ...

  7. node写简单的爬虫(二)

    上次我们已经成功的爬取了网站上的图片,现在我们把爬取的图片存储到本地 首先引入request var request=require('request'); http.get(url, functio ...

  8. ANSI编码方式转化为UTF-8方式

    说明: 记事本txt有四种编码方式,分别为:UTF-8.ANSI.Unicode和Unicode big endian,当进行写操作,创建的txt编码格式,与写入汉字的编码方式相同:如果写入的汉字是不 ...

  9. VirtualBox使用随笔

    1.virtualbox配置Android手机USB热点 host:Windows10;guest:windows XP/10 右击我的电脑 - 管理 - 设备管理器 - 网卡适配器,若手机正确vb连 ...

  10. 网络请求之jsonp封装

    首先介绍下jsonp原理 浏览器因为同源策略的限制,在不同源的服务器通过我们传统axios是不能直接用来请求数据的(忽略代理),而src标签则不受同源策略的影响,所以我们需要动态的创建带有src的标签 ...