資訊專欄INFORMATION COLUMN
摘要：今天寫著寫著，突然發(fā)現(xiàn)控制臺(tái)里有錯(cuò)誤這個(gè)問題很奇怪，之前從來沒有遇到過。此時(shí)就會(huì)發(fā)出警告并不是真的已經(jīng)無限循環(huán)了。相信大家聽后，可以更加明確日常學(xué)習(xí)的方向。目前還在折銷售中，歡迎大家，鏈接在此。
今天寫著寫著，突然發(fā)現(xiàn)控制臺(tái)里有錯(cuò)誤：
[Vue warn]: You may have an infinite update loop in a component render function
這個(gè)問題很奇怪，之前從來沒有遇到過。如果是我自己主導(dǎo)的項(xiàng)目，倒也好辦，慢慢 debug 就是；偏偏在公司的項(xiàng)目里遇到這個(gè)問題，而公司項(xiàng)目的體系結(jié)構(gòu)很復(fù)雜，我還沒完全掌握。更惱火的是，因?yàn)轶w系復(fù)雜，debug 也非常困難，再加上尚無測試框架，這個(gè)難搞啊……
好死不死的，當(dāng)時(shí)是下午3、4點(diǎn)鐘，正好到了肚餓的時(shí)刻，結(jié)果又落入低血糖狀態(tài)，真是屋漏偏逢連陰雨，船小又碰頂頭風(fēng)，餓得我腦仁生疼……
不過終于還是被我 Google + debug 出來。事實(shí)上是這樣的，在 v-for 循環(huán)當(dāng)中，如果用方法或者計(jì)算屬性對 vm.$data 的屬性進(jìn)行操作，理論上，可能因?yàn)樾薷牡窖h(huán)對象，誘發(fā)無限循環(huán)。此時(shí) Vue 就會(huì)發(fā)出警告（并不是真的已經(jīng)無限循環(huán)了）。
例如這樣一個(gè)組件，它里面是用 :checked + 實(shí)現(xiàn)的一組按鈕。它有以下功能：
為了能夠分組，需要設(shè)置它們的 name 屬性
為了能夠用 控制 ，需要給 設(shè)置 id
按鈕可以被刪除
于是我選擇這樣做：
這里，為了能生成唯一 ID，我選擇每次循環(huán)都對 vm.itemIndex++，這就會(huì)出現(xiàn)前面說的問題，存在隱患。
解決的方案有兩種，一種是把 itemIndex 也放在局部變量里，使它不直接關(guān)聯(lián)在組件上；另一種則是寫一個(gè)全局的唯一 ID 生成函數(shù)，然后引用進(jìn)來。原理都是一樣的。重復(fù)的部分就不寫了，修改后大體如下：
方案一 方案二// helper.js 生成唯一 id
let count = 0;
export default function uniqueID(increase = true) {
if (increase) {
count++;
}
return `prefix-${count}`;
}
// 原來的組件
import uniqueID from "./helper";
export default {
methods: {
getID(increase = true) {
let id = uniqueID(increase);
return `my-component-${this.selfIndex}-${id}`;
}
}
}
【廣告】肉老師的面試題詳解
順便做個(gè)廣告，我的新講堂已經(jīng)上線，將于下周二直播。
這次我決定把自己積累的面試題詳細(xì)地介紹給所有來聽課的同學(xué)。從設(shè)置這道題的目的，考察的方向，希望聽到的答案，答出多少大約是什么評價(jià)等等都來個(gè)徹底的公開。相信大家聽后，可以更加明確日常學(xué)習(xí)的方向。
目前還在75折銷售中，歡迎大家，鏈接在此。
這兩天聽評書《亂世梟雄》，學(xué)到一句話“拉屎臉朝外”，形容講義氣，不知道咋聯(lián)系的……
同步于 我的博客。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91781.html
Preface In the past, I posted an answer in SO about how to replace broken images. And the code is window.addEventListener( error, windowErrorCb, { capture: true }, true ) function windo...
Preface In the past, I posted an answer in SO about how to replace broken images. And the code is window.addEventListener( error, windowErrorCb, { capture: true }, true ) function windo...
Preface In the past, I posted an answer in SO about how to replace broken images. And the code is window.addEventListener( error, windowErrorCb, { capture: true }, true ) function windo...
Problem Given an array of integers with possible duplicates, randomly output the index of a given target number. You can assume that the given target number must exist in the array. Note:The array siz...
Building virtual reality experiences on the web with React VR Over the past year, virtual reality has made major strides toward becoming the next computing platform. With Oculus Rift, consumer-grade h...
閱讀 3823·2021-11-24 09:39
閱讀 1827·2021-11-02 14:41
閱讀 829·2019-08-30 15:53
閱讀 3490·2019-08-29 12:43
閱讀 1204·2019-08-29 12:31
閱讀 3097·2019-08-26 13:50
閱讀 804·2019-08-26 13:45
閱讀 996·2019-08-26 10:56
