vue實(shí)例對(duì)象data屬性訪問(wèn)不到值的問(wèn)題

實(shí)際上我的問(wèn)題標(biāo)題表述的是由問(wèn)題的，但是又找不到好的切題的表述 … 希望大神能進(jìn)來(lái)吧

<script language="JavaScript">

    var app = {
        state: 0,
        page: {},
        post: {
            getArticleList: function(){
                console.log(app.page.pn);
                $.post('http://www.xxx.com.cn/api.php/Article/GetArtList',{
                    'page': 1
                },function(res){
                    console.log(app.page.pn);
                    //console.log(app.page.$data.articleList);
                    if(res.data.length > 0){
                        app.page.articleList = app.page.articleList.concat(res.data);
                        app.page.pn = app.page.pn+1;
                    }
                });
            }
        }
    };
    $(function(){
        app.page = new Vue({
            el: '#article-list',
            data: {
                pn: 3,
                articleList: []
            },
            methods: {
                doAjaxLoad: function(){
                    app.post.getArticleList();
                }
            },
            created: function(){
                //console.log(this.pn);
                this.doAjaxLoad();
            }
        });
        //加載頁(yè)面
        //app.post.getArticleList();
    });
</script>

代碼如上，VUE生命周期 created 的時(shí)候，執(zhí)行自定義方法 doAjaxLoad
doAjaxLoad 這個(gè)方法調(diào)用全局對(duì)象 app 里的 post 對(duì)象里的 getArticleList 方法

問(wèn)題來(lái)了

為什么我在getArticleList方法一開始輸出 vue 實(shí)例的 data 屬性 pn 的值的時(shí)候是 undefined
在ajax callback里就能取值

甚至我在 doAjaxLoad 方法里輸出 this.pn 也是有值的 ！！

為什么 ？原理 …