控制台上的 Vue 警告:组件渲染函数中可能存在无限更新循环
Posted
技术标签:
【中文标题】控制台上的 Vue 警告:组件渲染函数中可能存在无限更新循环【英文标题】:Vue Warning on Console : You may have an infinite update loop in a component render function 【发布时间】:2021-03-21 13:08:03 【问题描述】:我是一名计算机科学专业的新生,我有一个关于 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"
>
</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 的照片,我不想填充最后一行的所有列,只显示所有照片所必需的。
但我只是认为,根据一些测试,我不确定警告是否来自这一行。
代码有效,但我觉得有些不对劲。 (它实际上是部分工作的,因为我仍然不知道如何从数组中获取要显示的信息,所以它只循环相同的东西)
我想学习如何做对。
那么谁能告诉我我可以做些什么来使警告消失,或者我是否必须更改所有内容,并创建一个新的逻辑以使其正常工作。
我只是想学习。
非常感谢,如果这是一个愚蠢的问题,或者如果我把一切都弄错了,再次抱歉,呵呵。 如果我写错了,请见谅。
:)
【问题讨论】:
首先,1.这个函数checkInsertedAllPhotos()
总是返回1,因为你只增加1一次。 2.v-for="index in numberLines()"
这里的numberLines()是一个数字,因为你返回photosMultipleThree / 3。你不能循环一个数字。
3.不建议在 v-for 中使用 v-if。相反,先使用计算属性过滤数组,然后循环过滤数组
【参考方案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 时玩得开心!
【讨论】:
【参考方案2】:感谢所有帮助过我的人,你们确实帮助了我!!!!
对不起,我今天只能回答。 我认为我能够在代码上做得更好,我改变了很多,特别是代码的逻辑。而且我认为它可以变得更好,但肯定我已经取得了很大的进步,呵呵。
我有点不愿意发布这个问题,因为即使在我发布它的时候我还不确定该怎么做,但我有点觉得这很愚蠢(就像一个愚蠢的问题),而且我只会花时间在我的问题上停下来的任何人。但我只得到了惊人的答案,每个人都很有耐心,所以非常感谢!!
(我也是 *** 的新手,所以我希望我做的一切都是正确的,呵呵)
【讨论】:
以上是关于控制台上的 Vue 警告:组件渲染函数中可能存在无限更新循环的主要内容,如果未能解决你的问题,请参考以下文章
构建 Vue 项目时出现错误“无法安装组件:未定义模板或渲染函数”
尝试根据值设置不同的数组。错误:组件渲染函数中可能存在无限更新循环