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

這個不是技術問題，這個是產品設計問題，或許你應該問一下你們產品，為什麼會有這樣的設計。