vue鈎子函數created和mounted的使用心得

作為一個新學vue的非科班小白，對於藝術史出身的尤大大，表示萬分膜拜，在此先磕一個！！！

最近接觸vue之后，感覺入行以來一年的思維發生了巨大的改變，但是對於一個前端小白來說，連jquery都學得磕磕絆絆的我真的在vue的使用上有很多不明白的地方，這次主要在於vue數據更新上。

首先來說，vue數據從哪個生命周期來獲取呢。那么先看一下一個vue實例的主要的生命周期：

從上面的圖片來看，如果我們需要通過類似ajax的方式去獲取數據，並把它掛載活更新到data上，那么應該在created及其之后，比如我們一開始跳轉到一個頁面，在加載頁面時需要獲取data來渲染dom樹，這個時候我個人都是在created這里去獲取數據。

當然重復一下，所有的函數都應該在methods里面定義，在其他環節去用this.方法名去調用。

所以我一般是開始階段這么獲取數據的

    created:function(){
                this.init();
            },
     methods:{
                init:function(){
                    jQuery.ajax({
                        type:"post",
                        data:xxxxxxx,
                        url:xxxxxxxx,
                        dataType:"json",
                        success:function (val) {
                            this.using = val.using;
                            this.oldinfo = val.info;
                            this.info =vue.getTwoDimensionArray(val.info,3);
                        }
                    });
            }

在created我確實拿到了數據，但是發現根本沒有辦法把數據更新到data上面，網上搜了this.$set()等方法都沒有用，面對網絡搜索引擎編程的我一時犯了難，於是我就和this這個關鍵字杠上了，其實很多剛接觸前端的小白都有這個疑惑，這個很常用的this究竟是什么呢？

如果我們在vue里面調用this是指這個vue實例本身，那么 var vm=Vue（{}），那么這個vm也就是這個vue實例本身，如果this在created里代表的不是vue實例，那么我直接用vm.using是否可以獲得data的數據更新呢，

於是，我把上面的init（）方法改成了

init:function(){
                    jQuery.ajax({
                        type:"post",
                        data:"xxxxxx,
                        url:xxxxxxxxx,
                        dataType:"json",
                        success:function (val) {
                            vm.using = val.using;
                            vm.oldinfo = val.info;
                            vm.info = vm.getTwoDimensionArray(val.info,3);
                        }
                    });
}

run一下，居然可以。那么目前的data更新問題算是解決了！

但是當我在mounted獲取data去操作dom的時候，發現依舊拿不到this.data。

於是我在created里面和mounted里面各自輸出一遍this.data,發現異步請求拿回數據輸出的this.data晚於mounted的輸出，所以應該是mounted中等不到data的返回就應該操作dom了，於是我就行，那就延遲啊，但是轉念一想，那我咋知道他什么時候拿回來，延遲一秒還是三秒？

mounted:function(){
                var that = this;
                this.$nextTick(function () {
                    that.bindChangeMethod();
                });
            }

使用了上面代碼之后依舊沒有效果，打開我的vue筆記發呆ing。。。。

然后我看到了watch，感覺靈機一動，立馬百度watch監聽異步數據（汗。。。面向搜索引擎編程！）

於是再對我的代碼修修改改，成了下面這個樣子

watch:{
       oldinfo:function(val){
           var that = this;
           this.$nextTick(()=>{
                      //這里是我對dom結點的操作 
                       that.bindChangeMethod();
            })
        }
},

go run！

成功，終於常常地舒了一口氣，自此問題差不對就解決了。

后面因為我是新用vue，外部調用vue中methods里面的方法時，vm.方法名又又又失效了。一直在報錯vm.方法名不是一個function，

沒辦法，在調用頁面輸出整個vm，還好，vm還是能拿到的，發現我要調用的方法不是vm直接內部方法，而是放在了$option里面，於是vm.$option.方法名，終於可以調用到了，之后就是不斷的修修改改了。