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.方法名，终于可以调用到了，之后就是不断的修修改改了。