You may have an infinite update loop in a componen

褰辯話發布于2019-08-22 11:06 / 3027人閱讀

摘要：今天寫著寫著，突然發現控制臺里有錯誤這個問題很奇怪，之前從來沒有遇到過。此時就會發出警告并不是真的已經無限循環了。相信大家聽后，可以更加明確日常學習的方向。目前還在折銷售中，歡迎大家，鏈接在此。

今天寫著寫著，突然發現控制臺里有錯誤：

[Vue warn]: You may have an infinite update loop in a component render function

這個問題很奇怪，之前從來沒有遇到過。如果是我自己主導的項目，倒也好辦，慢慢 debug 就是；偏偏在公司的項目里遇到這個問題，而公司項目的體系結構很復雜，我還沒完全掌握。更惱火的是，因為體系復雜，debug 也非常困難，再加上尚無測試框架，這個難搞啊……

好死不死的，當時是下午3、4點鐘，正好到了肚餓的時刻，結果又落入低血糖狀態，真是屋漏偏逢連陰雨，船小又碰頂頭風，餓得我腦仁生疼……

不過終于還是被我 Google + debug 出來。事實上是這樣的，在 v-for 循環當中，如果用方法或者計算屬性對 vm.$data 的屬性進行操作，理論上，可能因為修改到循環對象，誘發無限循環。此時 Vue 就會發出警告（并不是真的已經無限循環了）。

例如這樣一個組件，它里面是用 :checked + 實現的一組按鈕。它有以下功能：

為了能夠分組，需要設置它們的 name 屬性

為了能夠用控制，需要給設置 id

按鈕可以被刪除

于是我選擇這樣做：

這里，為了能生成唯一 ID，我選擇每次循環都對 vm.itemIndex++，這就會出現前面說的問題，存在隱患。

解決的方案有兩種，一種是把 itemIndex 也放在局部變量里，使它不直接關聯在組件上；另一種則是寫一個全局的唯一 ID 生成函數，然后引用進來。原理都是一樣的。重復的部分就不寫了，修改后大體如下：

方案一

方案二

// 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}`;
    }
  }
}

【廣告】肉老師的面試題詳解

順便做個廣告，我的新講堂已經上線，將于下周二直播。

這次我決定把自己積累的面試題詳細地介紹給所有來聽課的同學。從設置這道題的目的，考察的方向，希望聽到的答案，答出多少大約是什么評價等等都來個徹底的公開。相信大家聽后，可以更加明確日常學習的方向。

目前還在75折銷售中，歡迎大家，鏈接在此。

這兩天聽評書《亂世梟雄》，學到一句話“拉屎臉朝外”，形容講義氣，不知道咋聯系的……

同步于我的博客。

GPU云服務器云服務器 infinite May have Loops

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91781.html

Image Load Error Handler

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...

cocopeak 2019-08-02 12:03 評論0 收藏0
Image Load Error Handler

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...

longmon 2019-08-29 17:18 評論0 收藏0
Image Load Error Handler

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...

roland_reed 2019-08-26 13:23 評論0 收藏0
[LeetCode] 398. Random Pick Index (Reservoir Sampl

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...

edagarli 2019-08-16 13:46 評論0 收藏0
使用REACT VR構建web虛擬現實

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...

anquan 2019-08-20 15:55 評論0 收藏0