记录一下Vue中的created函数所踩到的坑(回调函数不立即生效)
在Vue中,经常会在created函数中初始化页面内容。因此,我们常常会在created函数中通过请求后台的方式去获取数据。getAction(this.url.getCurrentUser,{},"get").then(function(res){if(res.success){this.model.singlerCode= res.result.username;}else{console.l
在Vue中,经常会在created函数中初始化页面内容。因此,我们常常会在created函数中通过请求后台的方式去获取数据。
getAction(this.url.getCurrentUser,{},"get").then(function(res){ if(res.success){ this.model.singlerCode= res.result.username; }else{ console.log("失败了") } })
原本我是上面的这种写法。后来发现赋值全部失败了。
后来网上寻找一番,终于把代码改良了一下:
this.$nextTick(()=>{ getAction(this.url.getCurrentUser,{},"get").then(function(res){ if(res.success){ this.model.singlerCode= res.result.username; }else{ console.log("失败了") } }) });
可以看到,相比原来的,后面的代码增加了this.$nextTick,
原理参考:https://www.cnblogs.com/qhantime/p/11379826.html
简单的总结为:在created()
钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()
的回调函数中。与之对应的就是mounted()
钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。
可是,我发现这样的代码还是无法赋值,于是我又修改:
this.$nextTick(()=>{
getAction(this.url.getCurrentUser,{},"get").then((res)= >{ if(res.success){
this.model.singlerCode= res.result.username; }else{ console.log("失败了") } }) });
可以发现,function函数简化成了箭头函数,于是我又去百度了一番:
参考:https://blog.csdn.net/weixin_43789897/article/details/88905193
简单总结为this指向性的问题。感觉this是个大文章,此处不作深究,免得误人子弟。
但奇葩的是,我这么写结果仍然是不起作用的。
后来又改版了一下:
this.$nextTick(()=>{ getAction(this.url.getCurrentUser,{},"get").then((res)=>{ if(res.success){ this.$set(this.model,'singlerCode',res.result.username); this.$set(this.model,'singler',res.result.realname); }else{ console.log("失败了") } }) });
可以发现赋值方法变成了$set,因为我在this.model初始化的时候,赋值为{}。那么给this.model添加新属性的时候,可以this.model.singler = "123"之类的操作,也能生效,但是不会更新视图。而你用$set显示声明,就能做到视图更新。
终于视图生效啦~~~~
更多推荐
所有评论(0)