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",
ajax实例里面的函数
data:xxxxxxx,
url:xxxxxxxx,
dataType:"json",
success:function (val) {
this.using = val.using;
this.oldinfo = val.info;
this.info =TwoDimensionArray(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.⽅法名，终于可以调⽤到了，之后就是不断的修修改改了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。