控制台上的 Vue 警告：组件渲染函数中可能存在无限更新循环

Question

我是一名计算机科学专业的新生，我有一个关于 Vue.js 的学校项目要做。 它正在工作，但它显示以下警告：

[Vue 警告]：组件渲染函数中可能存在无限更新循环。

英语不是我的第一语言，所以如果我提前写错了，我很抱歉，但我会尽力解释我在项目上要做的事情。

我必须创建一个照片网格/相册，每行显示不超过 3 张照片。像这样的东西： Example of how it has to look

代码是这样的：

  <template>
<v-container>
  <!-- 'v-container' est´substituindo ' div class="clubes-lista" '-->
  <div class="grid-photo">
    <v-container class="grey lighten-3">
      <v-row
        v-for="index in numberLines()"
        :key="index"
        class="grey lighten-3"
      >
        <v-col v-for="n in 3" :key="n" cols="4">
          <v-card v-if="numberPhotos > checkInsertedAllPhotos()" outlined>
            <v-img
              src="https://i.pinimg.com/736x/96/28/b7/9628b7892fd0543782f53eeec4bae502.jpg"
              alt="Bird Photo"
            >
            </v-img>
            <div class="photo-subtitle">
              <v-icon size="15">mdi-heart-outline</v-icon>
              <p>The Cockatiel</p>
            </div>
          </v-card>
          <v-card v-else></v-card>
        </v-col>
      </v-row>
    </v-container>
  </div>
</v-container>

<script>
export default {
name: "PhotoGrid",

data() {
  return {
    listPhotosOnGrid: [],
    numberPhotos: 0,
    numberTotalLines: 0,
    countPhotos: 0,
  };
},

computed: {},

methods: {
  createPhotosList() {
    var listPhotos = [];
    for (var i = 0; i < 10; i++) {
      var aux = {
        id: i + 1,
        src:
          "https://i.pinimg.com/736x/96/28/b7/9628b7892fd0543782f53eeec4bae502.jpg",
        subtitle: "The cockatiel",
      };

      listPhotos.push(aux);
    }

    this.listPhotosOnGrid = listPhotos;
    this.numberPhotos = listPhotos.length;
  },

  numberLines() {
    this.createPhotosList();
    var photosMultipleThree = this.numberPhotos;

    while (photosMultipleThree % 3 != 0) {
      photosMultipleThree = photosMultipleThree + 1;
    }
    this.numberTotalLines = photosMultipleThree / 3;

    return photosMultipleThree / 3;
  },

  checkInsertedAllPhotos() {
    var cont = this.countPhotos++;
    return cont;
  },
},

};

<style scoped>
.photo-subtitle {
  font-size: 10px;
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: flex-start;
  padding: 0;
  margin-top: 10px;
}

.photo-subtitle p {
  margin-left: 5px;
}

所以...试图弄清楚发生了什么，我认为警告来自以下行：

<v-card v-if="numberPhotos > checkInsertedAllPhotos()" outlined>

if 是因为它不能显示比给出的更多的图像。例如，每行显示 3 张照片，所以如果我没有多张 os 3 的照片，我不想填充最后一行的所有列，只显示所有照片所必需的。

但我只是认为，根据一些测试，我不确定警告是否来自这一行。

代码有效，但我觉得有些不对劲。 （它实际上是部分工作的，因为我仍然不知道如何从数组中获取要显示的信息，所以它只循环相同的东西）

我想学习如何做对。

那么谁能告诉我我可以做些什么来使警告消失，或者我是否必须更改所有内容，并创建一个新的逻辑以使其正常工作。

我只是想学习。

非常感谢，如果这是一个愚蠢的问题，或者如果我把一切都弄错了，再次抱歉，呵呵。 如果我写错了，请见谅。

:)

Answer 1

我查看了您的代码。首先，我建议您停止使用var 关键字，而改用let 或const（您可以查看问题here 并查看基于这些关键字的范围，var 范围现在非常不寻常，它会导致一些问题）。

关于无限更新循环的特定问题，问题来自您的checkInsertedAllPhotos 函数。我会这样解释：

• 在v-if Vue内部机制中，通过触发checkInsertedAllPhotos函数来检查元素是否应该被渲染

• 当执行函数checkInsertedAllPhotos时，数据countPhotos会增加（顺便说一句，这样做会更好

  this.countPhotos ++; return this.countPhotos;

• 由于数据已被修改，Vue 正在触发页面的重新渲染

• 由于有一个重新渲染，Vue 在 v-if 中检查是否应该通过触发函数 checkInsertedAllPhotos 来渲染元素。

如果 Vue 不阻止它，它可能是无限的！

我确实建议您重新设计一下您的逻辑。然而，一个快速解决您的问题的方法是，当您检查列表中的索引时：例如，如果您想显示 listPhotosOnGrid[i]，您检查 i<numberPhotos 是否带有 v-if 并在 v-else 中如果需要，可以显示其他内容。

我还认为，通过利用 css（例如 css-grid），您可以编写更简单的代码。你可以有这么简单的东西：

<div v-for="n in 100">
    <img v-bind:src="`https://i.pinimg.com/photos/${n}.png`">
</div>

和一些 CSS 来设置它的样式，每行只有 3 个项目。如果你想了解 css-grid，我会推荐 Mozzila documentation 或 following tutoriel。

现在我很难理解确切的问题，因为里面有多个主题要解决，但我希望我对无限循环的解释对你有帮助！

在学习 Vue 时玩得开心！

Answer 2

感谢所有帮助过我的人，你们确实帮助了我！！！！

对不起，我今天只能回答。 我认为我能够在代码上做得更好，我改变了很多，特别是代码的逻辑。而且我认为它可以变得更好，但肯定我已经取得了很大的进步，呵呵。

我有点不愿意发布这个问题，因为即使在我发布它的时候我还不确定该怎么做，但我有点觉得这很愚蠢（就像一个愚蠢的问题），而且我只会花时间在我的问题上停下来的任何人。但我只得到了惊人的答案，每个人都很有耐心，所以非常感谢！！

（我也是 StackOverflow 的新手，所以我希望我做的一切都是正确的，呵呵）