在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顯示聲明，就能做到視圖更新。

終于視圖生效啦~~~~

?

?

總結

以上是生活随笔為你收集整理的记录一下Vue中的created函数所踩到的坑（回调函数不立即生效）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。