vue怎么保证在渲染之前就拿到数据，相当于阻塞生命周期？

Question

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

Answer 1

你的要求可以这样理解？
我在 beforeCreate 里请求一个API，之后就不希望 VUE 继续，直到数据回来后再执行 VUE 的生命周期？
如果是这样的，那办不到。

简单的变通方法，可以使用楼上的 v-if 思路。

另外，也是官方可以做到的，可以这样。
在路由跳转到此之前请求数据，请求到执行 next() 操作后，再开始执行 VUE 的生命周期。
资料：在导航完成前获取数据

Answer 2

渲染之前的话，created,beforeCreate就开始调接口，然后页面刚进来就弄为空，有返回之后再显示相应的部分。这样渲染和请求是异步的，等到请求回来之后再把页面放出来（v-if）。

Answer 3

ajax是异步操作，vue不能保证在渲染之前拿到数据，vue能做的是初始化页面隐藏（visibility:hidden），拿到数据再显示。

Answer 4

楼上正解，由于异步操作的存在，vue是不能保证在页面渲染之前就拿到数据的，所以一般的做法是，隐藏页面，在created或者beforeCreate的时候调用接口获取数据，在成功拿到数据之后的回调函数里面，控制页面显示，这样可以最大程度上避免页面跳动的问题

Answer 5

这种问题的解决思路不是应该加一个loading吗。。。在异步获取数据的时候加上一个loading表示现在在获取数据，然后再获取数据之后再进行重新的渲染

Answer 6

阻塞不行吧，可以添加loadding 一个是不至于页面空白，另一个也是不至于数据再加载页面跳动

Answer 7

把请求数据变成同步

Answer 8

这种应该用路由的钩子

beforeRouterEnter(to,from,next) {
    doAjax.then(res => {
        // 获取数据
        next(vm => {
            // 对数据进行操作
        })
    })
}