情景說明：

之前用 vue 做數(shù)據(jù)綁定更新時，發(fā)現(xiàn)一個莫名奇妙的問題。

我在 vue 實例中聲明了一個數(shù)組屬性如 books: []，在異步請求的回調(diào)函數(shù)中使用 this.books = res.data.data; 進(jìn)行數(shù)據(jù)更新，更新步驟后面緊跟著打印了 console.log(this.books)，打印數(shù)據(jù)顯示確實更新成功！但頁面數(shù)據(jù)渲染無論是 {{books.length}} 還是 {{books}} 都顯示沒有數(shù)據(jù)！??！

這就腦瓜子疼了，花了老長時間反復(fù)證明了：this.books 數(shù)據(jù)肯定更新上去了，但它喵的 {{books}} 就是不顯示！

敲重點：我是在 axios 的回調(diào)函數(shù)中使用的 this 更新數(shù)據(jù)！

最后想起了一個小細(xì)節(jié)，axios 異步通信的回調(diào)函數(shù)我用的是函數(shù)表達(dá)式 axios({xxx}).then(function(res){xxx})，格式示例如下：

axios({
    url: url,
    method: "get",
    headers: {
        token: token
    }, //自定義請求頭數(shù)據(jù)傳遞token
    params: {
        userId: userId
    }
}).then(function(res) {
    //上面的回調(diào)函數(shù)用的標(biāo)準(zhǔn)格式
	}
});  

使用這種格式的回調(diào)函數(shù)寫法，如果在回調(diào)函數(shù)中，使用 this，那么，這個 this 就不是 vm(ViewModel) 對象了，而是回調(diào)函數(shù)自身這個對象?。。?/p>

所以，使用這種回調(diào)函數(shù)寫法，在回調(diào)函數(shù)中，就不能使用類似 this.books 進(jìn)行數(shù)據(jù)更新！只能使用 vm.books（vm 指的是創(chuàng)建 vue 實例對象時的引用或?qū)ο髮傩悦Q）來進(jìn)行對 vue 對象數(shù)據(jù)的更新。

如果想使用 this 來實現(xiàn)數(shù)據(jù)更新，那就必須使用回調(diào)函數(shù)的簡寫格式：axios({xxx}).then((res)=>{xxx})，格式示例如下：

axios({
    url: url,
    method: "get",
    headers: {
        token: token
    }, //自定義請求頭數(shù)據(jù)傳遞token
    params: {
        userId: userId
    }
}).then((res)=>{
    //上面的回調(diào)函數(shù)用的簡寫格式
    }
});        

使用這種簡寫格式的回調(diào)函數(shù)寫法，就可以直接在回調(diào)函數(shù)中使用 this，此時，這個 this 也是 vm(ViewModel) 對象?。?！

PS：好吧，這細(xì)節(jié)也是沒誰了，也怪我自己突然沒注意到，使用了標(biāo)準(zhǔn)格式的回調(diào)函數(shù)寫法~

但是，話說 ，為什么它喵的，使用標(biāo)準(zhǔn)格式寫法，this 指的不是 vue 實例對象，但是用它更新的數(shù)據(jù)如 this.books 也給更新上去了，打印出來也真的是一點毛病沒有？？？

到此這篇關(guān)于vue 中使用 this 更新數(shù)據(jù)的一次大坑的文章就介紹到這了,更多相關(guān)vue 使用 this 更新數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論