javascript - Vue中的data数据通过Ajax获取，然后实例化Vue。如何控制让页面加载完毕后先执行Ajax请求，请求成功后再实例化Vue？

Question

Vue中的data数据通过Ajax获取，然后实例化Vue。
如何控制让页面加载完毕后先执行Ajax请求，请求成功后再实例化Vue？

Answer 1

onload事件绑定Ajax请求，请求成功回调中再实例化Vue就可以了。

Answer 2

昨天在百度知道那里看到类似的问题，
想问一下是那里过来的吗？

想知道你为什么要这样做？

我的答案是：不建议这样做。

Answer 3

你可以在created中请求、

最好不要让页面等待请求、不然会有空白、

created的时候请求如果到了mounted还拿不到结果、可以出loading动画

不要让页面等待请求之后再渲染、万一用户网速不好、却看不到loading动画而是一片空白、首先会想到网站的问题、如果有loading动画、才会知道、是在等待请求

用loading动画、更让用户容易理解

Answer 4

$.ajax({
    url: "...", 
    ...
    success: function(){
        active();
    }
});

function active(){
     let app=new Vue({
        data:{
        },
        ...
    })
}

就是等请求成功了，再执行函数，执行vue的实例化！

Answer 5

其实这是很常见的需求。

Vue可以在第一时间实例化，这时的data可以没有值，界面上展示loading或"正在加载"之类的提示，同时在实例的created钩子中发起数据请求，得到数据后给实例赋值就行了，vm.data = ajaxData。

Answer 6

$(document).ready(function() {
    $.ajax({
        type: "get",
        async: false,
        url: '',
        dataType: "JSONP",
        beforeSend: function(){
            $("#content .loading").html("数据加载中<img class='loading-gif' src='images/loading.gif'/>");
        },
        success: function (data) {
            if(data.orders.length != 0){
                $("#content .loading").empty();
                // 实例化
            }
            else{
                $("#content .loading").html("暂时没有你的数据哦");
            }
        },
        error: function (message) {
            $("#content .loading").html("数据请求失败，请稍候再试");
        }
    });
});

$(document).ready()表示页面加载后执行里面的函数。
jquery ajax的beforeSend里写点加载提示，success就清空提示然后有数据就实例化没有就提示，请求error也给提示，这是最近实习刚写的一个，个人感觉也蛮完整了。

Answer 7

这个不是技术问题，这个是产品设计问题，或许你应该问一下你们产品，为什么会有这样的设计。