vue 中使用 this 更新資料的一次大坑-有解無憂

情景說明：

之前用 vue 做資料系結更新時，發現一個莫名奇妙的問題，

我在 vue 實體中宣告了一個陣列屬性如 books: []，在異步請求的回呼函式中使用 this.books = res.data.data; 進行資料更新，更新步驟后面緊跟著列印了 console.log(this.books)，列印資料顯示確實更新成功！但頁面資料渲染無論是 {{books.length}} 還是 {{books}} 都顯示沒有資料！！！

這就腦瓜子疼了，花了老長時間反復證明了：this.books 資料肯定更新上去了，但它喵的 {{books}} 就是不顯示！

敲重點：我是在 axios 的回呼函式中使用的 this 更新資料！

最后想起了一個小細節，axios 異步通信的回呼函式我用的是函式運算式 axios({xxx}).then(function(res){xxx})，格式示例如下：
axios({
    url: url,
    method: "get",
    headers: {
        token: token
    }, //自定義請求頭資料傳遞token
    params: {
        userId: userId
    }
}).then(function(res) {
    //上面的回呼函式用的標準格式
	}
});  
使用這種格式的回呼函式寫法，如果在回呼函式中，使用 this，那么，這個 this 就不是 vm(ViewModel) 物件了，而是回呼函式自身這個物件！！！

所以，使用這種回呼函式寫法，在回呼函式中，就不能使用類似 this.books 進行資料更新！只能使用 vm.books（vm 指的是創建 vue 實體物件時的參考或物件屬性名稱）來進行對 vue 物件資料的更新，

如果想使用 this 來實作資料更新，那就必須使用回呼函式的簡寫格式：axios({xxx}).then((res)=>{xxx})，格式示例如下：
axios({
    url: url,
    method: "get",
    headers: {
        token: token
    }, //自定義請求頭資料傳遞token
    params: {
        userId: userId
    }
}).then((res)=>{
    //上面的回呼函式用的簡寫格式
    }
});        
使用這種簡寫格式的回呼函式寫法，就可以直接在回呼函式中使用 this，此時，這個 this 也是 vm(ViewModel) 物件！！！

PS：好吧，這細節也是沒誰了，也怪我自己突然沒注意到，使用了標準格式的回呼函式寫法~

但是，話說，為什么它喵的，使用標準格式寫法，this 指的不是 vue 實體物件，但是用它更新的資料如 this.books 也給更新上去了，列印出來也真的是一點毛病沒有？？？

都看到最后了，右下角來個贊鴨！-.- 歡迎評論留言~

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/538209.html

標籤：其他

上一篇：webpack調優技巧

下一篇：vue3和vue2 的區別，vue3和vu2到底哪個好呢？