Vue infinite update loop的問題解決
一個(gè)尤大大曾回復(fù)過的問題
vue warn : You may have an infinite update loop in a component render function
最近再寫一個(gè)數(shù)組渲染時(shí)，源數(shù)據(jù)是拿到的數(shù)組經(jīng)過排序后的數(shù)組，正常運(yùn)行卻出現(xiàn)爆紅：
報(bào)紅代碼：
computed: {
...mapState({
fromNames (state) {
let fromNames = state.quote.fromNames;
return fromNames.sort((a, b) => b.isBind - a.isBind);;
},
}),
},
然后...
然后百思不得解，最終找到源頭：
你的確導(dǎo)致了一個(gè)無限循環(huán)， 因?yàn)?code>array.sort()改變了數(shù)組自身，導(dǎo)致了過濾器又一次被觸發(fā)。確保在副本上對數(shù)組排序：
return value.slice().sort(...)
解決方案：
computed: {
...mapState({
fromNames (state) {
let fromNames = state.quote.fromNames;
return fromNames.slice().sort((a, b) => b.isBind - a.isBind);
},
}),
},
數(shù)組方法 array.slice()用法
arr.slice([begin[, end]])
slice() 方法會淺復(fù)制（shallow copy）數(shù)組的一部分到一個(gè)新的數(shù)組，并返回這個(gè)新數(shù)組。
begin 起始位置 如果未定義，就默認(rèn)0；如果大于數(shù)組長度，返回空數(shù)組；如果是負(fù)數(shù)，則從末尾算起；
end 結(jié)束位置（不包含該位置元素）如果省略了，就默認(rèn)到末尾；如果大于數(shù)組長度，就取數(shù)組長度；如果是負(fù)數(shù)，則從末尾算起。
技巧：處理類數(shù)組對象
slice() 可以用于把一個(gè)類數(shù)組對象轉(zhuǎn)化為一個(gè)新數(shù)組。
例如:
function list() {
return Array.prototype.slice.call(arguments);
}
var list1 = list(1, 2, 3); // [1, 2, 3]
也可以使用.call綁定在函數(shù)的Function.prototype（也可以被簡化為[].slice.call(arguments)）
var unboundSlice = Array.prototype.slice;
var slice = Function.prototype.call.bind(unboundSlice);
function list() {
return slice(arguments);
}
var list1 = list(1, 2, 3); // [1, 2, 3]
或者
[].slice.call({ 0: 0, 1 : 2, 2: 4, length: 4 })
//[0, 2, 4, empty]
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue打開其他項(xiàng)目頁面并傳入數(shù)據(jù)詳解
這篇文章主要給大家介紹了關(guān)于vue打開其他項(xiàng)目頁面并傳入數(shù)據(jù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
Vue ElementUI之Form表單驗(yàn)證遇到的問題
這篇文章主要介紹了Vue ElementUI之Form表單驗(yàn)證遇到的問題,需要的朋友可以參考下2017-08-08
vue Element左側(cè)無限級菜單實(shí)現(xiàn)
這篇文章主要介紹了vue Element左側(cè)無限級菜單實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Vue中使用echarts實(shí)現(xiàn)繪制人體動態(tài)圖
這篇文章主要為大家詳細(xì)介紹了Vue中如何使用echarts實(shí)現(xiàn)繪制人體動態(tài)圖,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
本篇文章主要介紹了深入理解vue $refs的基本用法 ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了vue項(xiàng)目中使用postcss-px2rem的方法總結(jié),在項(xiàng)目中為了屏幕適配，經(jīng)常會用到rem，postcss-px2rem就是為了讓我們直接在將代碼中px自動轉(zhuǎn)化成對應(yīng)的rem的一個(gè)插件，需要的朋友可以參考下2022-05-05
vue下載excel的實(shí)現(xiàn)代碼后臺用post方法
這篇文章主要介紹了vue下載excel的實(shí)現(xiàn)代碼,后臺用post方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了Vue中的混入的使用(vue mixins)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
vue+openlayers+nodejs+postgis實(shí)現(xiàn)軌跡運(yùn)動效果
使用postgres（postgis）數(shù)據(jù)庫以及nodejs作為后臺,vue和openlayers做前端,openlayers使用http請求通過nodejs從postgres數(shù)據(jù)庫獲取數(shù)據(jù),這篇文章主要介紹了vue+openlayers+nodejs+postgis實(shí)現(xiàn)軌跡運(yùn)動,需要的朋友可以參考下2024-05-05
這篇文章主要為大家詳細(xì)介紹了Vue3中邏輯復(fù)用的相關(guān)知識,文中的示例代碼簡潔易懂,對我們深入了解Vue3有一定的幫助,需要的小伙伴可以參考下2023-12-12