快捷導(dǎo)航

vue?中使用?this?更新數(shù)據(jù)的一次問(wèn)題記錄

更新時(shí)間：2022年11月24日 08:21:30 作者：luis林威

這篇文章主要介紹了vue?中使用?this?更新數(shù)據(jù)的一次大坑?,我在 vue 實(shí)例中聲明了一個(gè)數(shù)組屬性如?books: []，在異步請(qǐng)求的回調(diào)函數(shù)中使用?this.books = res.data.data;?進(jìn)行數(shù)據(jù)更新，感興趣的朋友跟隨小編一起看看吧

情景說(shuō)明：

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

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

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

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

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

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

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

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

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

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

使用這種簡(jiǎn)寫(xiě)格式的回調(diào)函數(shù)寫(xiě)法，就可以直接在回調(diào)函數(shù)中使用 this，此時(shí)，這個(gè) this 也是 vm(ViewModel) 對(duì)象?。。?/p>

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

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

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

您可能感興趣的文章: