vue实例对象data属性访问不到值的问题

Question

实际上我的问题标题表述的是由问题的，但是又找不到好的切题的表述 … 希望大神能进来吧

<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 的时候，执行自定义方法 doAjaxLoad
doAjaxLoad 这个方法调用全局对象 app 里的 post 对象里的 getArticleList 方法

问题来了

为什么我在getArticleList方法一开始输出 vue 实例的 data 属性 pn 的值的时候是 undefined
在ajax callback里就能取值

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

为什么 ？原理 …

Answer 1

1、为什么我在getArticleList方法一开始输出 vue 实例的 data 属性 pn 的值的时候是 undefined
因为app.page = ...是赋值操作，vue实例化完成后才执行。当你执行到created ==> doAjaxLoad==> getArticleList ==> console.log(app.page.pn)时，app.page还是空对象。所以app.page.pn是undefined。

2、在ajax callback里就能取值
callback是异步，此时app.page已赋值。

3、甚至我在 doAjaxLoad 方法里输出 this.pn 也是有值的 ！！
因为vue实例已经初始化了data。

Answer 2

因为没有完成数据观测和对应的回调？

Answer 3

我建议你上传一下你的代码, are you ok?

Answer 4

在执行created的时候app.page整个实例还没有初始化完成，所以访问不到，只有渲染完之后才得到完整的实例化对象