记录一下Vue中的created函数所踩到的坑(回调函数不立即生效)

您所在的位置:网站首页 vue页面刷新获取不到参数 记录一下Vue中的created函数所踩到的坑(回调函数不立即生效)

记录一下Vue中的created函数所踩到的坑(回调函数不立即生效)

2024-02-06 01:16| 来源: 网络整理| 查看: 265

在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显示声明,就能做到视图更新。

终于视图生效啦~~~~

 

 



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3