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

最新推荐文章于 2023-12-12 22:49:35 发布

qq_35383788

最新推荐文章于 2023-12-12 22:49:35 发布

阅读量8.4k

点赞数 7

文章标签： vue

本文链接：https://blog.csdn.net/qq_35383788/article/details/115998960

版权

本文讲述了在Vue应用中，created钩子函数内进行数据初始化时遇到的问题及解决方案。最初，直接在created中通过API获取数据并赋值给model失败，原因是DOM未渲染。使用$nextTick解决这个问题，但依然无效，因为this指向问题。最终，通过使用箭头函数修复了this指向，并使用$set确保视图更新，成功实现了数据绑定。

摘要由CSDN通过智能技术生成

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

终于视图生效啦~~~~