Vueinfiniteupdateloop的問(wèn)題解決

一個(gè)尤大大曾回復(fù)過(guò)的問(wèn)題

為焉耆等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及焉耆網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為做網(wǎng)站、成都網(wǎng)站制作、焉耆網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

vue warn : You may have an infinite update loop in a component render function

最近再寫(xiě)一個(gè)數(shù)組渲染時(shí)，源數(shù)據(jù)是拿到的數(shù)組經(jīng)過(guò)排序后的數(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è)無(wú)限循環(huán)， 因?yàn)?code>array.sort()改變了數(shù)組自身，導(dǎo)致了過(guò)濾器又一次被觸發(fā)。確保在副本上對(duì)數(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() 方法會(huì)淺復(fù)制（shallow copy）數(shù)組的一部分到一個(gè)新的數(shù)組，并返回這個(gè)新數(shù)組。

begin 起始位置 如果未定義，就默認(rèn)0；如果大于數(shù)組長(zhǎng)度，返回空數(shù)組；如果是負(fù)數(shù)，則從末尾算起；

end 結(jié)束位置（不包含該位置元素）如果省略了，就默認(rèn)到末尾；如果大于數(shù)組長(zhǎng)度，就取數(shù)組長(zhǎng)度；如果是負(fù)數(shù)，則從末尾算起。

技巧：處理類數(shù)組對(duì)象

slice() 可以用于把一個(gè)類數(shù)組對(duì)象轉(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（也可以被簡(jiǎn)化為[].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]

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。