實際上我的問題標題表述的是由問題的，但是又找不到好的切題的表述 … 希望大神能進來吧

<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();
            }
        });
        //加載頁面
        //app.post.getArticleList();
    });
</script>

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

問題來了

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

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

為什么 ？原理 …