vueJS计算筛选器循环过多
是指在Vue.js中使用计算属性或筛选器时，循环的次数过多，导致性能下降或页面卡顿的问题。
计算属性是Vue.js中一种便捷的属性计算方式，它会根据依赖的数据自动进行缓存，只有在依赖数据发生变化时才会重新计算。而筛选器则是用于对文本进行格式化的一种方式。
当在计算属性或筛选器中进行循环操作时，如果循环次数过多，会导致计算属性或筛选器的执行时间过长，从而影响页面的渲染性能。这种情况下，我们需要优化代码，减少循环次数或使用其他方式来实现相同的功能。
以下是一些优化策略和建议：
- 减少循环次数：如果可能的话，尽量减少循环的次数。可以通过缓存数据、合并循环操作等方式来减少循环次数。
- 使用计算属性替代筛选器：如果循环操作是用于筛选器中的文本格式化，可以考虑将循环操作放到计算属性中进行处理，然后在模板中直接使用计算属性的结果。
- 使用v-for指令代替筛选器：如果循环操作是用于生成列表或渲染多个元素，可以考虑使用v-for指令来代替筛选器。v-for指令可以更高效地生成列表，并且可以利用Vue.js的虚拟DOM机制进行优化。
- 使用异步操作：如果循环操作涉及到网络请求或其他耗时操作，可以考虑使用异步操作来提高性能。可以使用Vue.js提供的异步组件、异步加载数据等方式来实现。
- 使用Vue.js的性能优化工具：Vue.js提供了一些性能优化工具，如Vue Devtools、Vue CLI等，可以使用这些工具来分析和优化代码的性能问题。
总结起来，当遇到vueJS计算筛选器循环过多的问题时，我们可以通过减少循环次数、使用计算属性替代筛选器、使用v-for指令代替筛选器、使用异步操作以及使用Vue.js的性能优化工具等方式来优化代码，提高页面的渲染性能。
相关·内容
我有一个过滤器：
Vue.filter('limit', function (value, amount) {
return value.filter(function(val, index, arr){
return index < amount;
});
});
我就是这样用的：
<div v-for="movimiento in movimientos | limit 7" class="c-movimientos-tabla__block">
如何更改任意按钮中单击的限制号？
浏览 1提问于2017-08-14得票数 0
回答已采纳
1回答
我正在根据用户输入过滤一组大型项目，但速度变慢了。所以，想要实现Lodash去反跳。然而，去反跳不会影响任何东西。
以下是HTML中的搜索输入字段，用户可以在其中键入以过滤数组。
<input v-model="search" type="text"/>
在下面的代码中，我将遍历filteredIcons computed属性以显示这些项。
<section v-if="icons.length">
<button v-for="(icon, index) in filteredIcons" :k
浏览 6提问于2020-03-07得票数 1
回答已采纳
src/app.js看起来像：
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource';
Vue.use(VueRouter);
Vue.use(VueResource);
const app = require("./app.vue");
const f = require('./filters');
const router = new VueRouter({
r
浏览 2提问于2017-06-27得票数 6
回答已采纳
2回答
如果我像这样设置Vue.data数组，我将在Vue控制台日志面板数组中得到像这样的[0: Object, 1: undefined 2: Object];，并且在'v-for="cell in row.cells"'中迭代之后，我得到了任何未定义属性的问题。
我这样解决了我的问题：
v-for="cell in row.cells" v-bind:colspan="cell.colspan" v-if="typeof cell !== 'undefined'"
v-for="cell
浏览 1提问于2019-05-03得票数 0
我正在阅读谷歌的一张100,000+记录，但我只想在某个日期之后加载这些记录。(因此应用过滤器)。但我无法做到这一点，因为我不知道如何在不使用foreach的情况下访问列名。
下面是googlesheet中的数据
因此，基本上，我想要过滤的记录，类似这样。
时间戳ge ' 10/13/2021‘所以它将只返回10/13/2021和10/14/2021的记录。等。
这有可能做到吗？如果没有，那么解决此问题的最佳推荐方法是什么，因为我只想在下一步中将每日记录加载到sql。
浏览 0提问于2021-10-14得票数 0
回答已采纳
1回答
我正在为我的数据做排序和筛选。我有一些API的卡片。对于排序，我有很少的问题(按价格排序，按时间排序，等等)。默认的排序是按价格排序，它已启用。
过滤器是应该显示/隐藏我的卡片的输入(例如:最低价格和最高价格的范围)。
我已经完成了筛选，但是当我尝试按时间对项目排序时，筛选器的v显示逻辑从以前的排序中保存下来(按价格排序)
卡来自挂载() axios响应
Result.vue
用于排序的按钮
<div class="sort-btn down" v-bind:class="{ activesort: activesort }"
v-on:clic
浏览 2提问于2018-08-10得票数 2
回答已采纳
1回答
我想为我的表进行分页，但是，当我运行时，我的数据不会显示任何内容。我很困惑我的代码，这是错误的，也许在这里，任何人都可以帮助我。
var newVue = new Vue({
el: '#app',
data: {
items: [
{ name: "item #1" }, { name: "item #2" }, { name: "item #3" }, { name: "item #4" },
{ name: "item #5" }, { name: "ite
浏览 4提问于2017-01-19得票数 2
回答已采纳
下面是我的代码
<td v-for="config in configs" v-if="config">
<input type="number" v-model="config.score" v-on:keyup="computeTestScores(allocation, $event)">
</td>
<td><span class="subtotal"></span></td>`
如何计算小计？第二
浏览 2提问于2018-04-13得票数 0
1回答
我在可视化仪表板上工作，我面临着一些问题。
我对在d3js和canvasjs中选择什么感到非常困惑。虽然d3js在良好的视觉效果方面有丰富的功能，但我更喜欢画布，因为它很容易创建图表，如果您仍然有任何想法让我进一步选择(d3js& canvasjs)，请帮助它。
目的:我想创造一个交互式仪表板与许多交叉过滤器的视觉效果，有什么建议吗？API中的数据调用模式；是完全从服务器获取数据并处理java脚本中的数据，还是应该分别获取每个图表的数据。
如果我从数据库中获得整个连接的数据，那么对于仪表板来说，数据大小太大了(超过2MB)，如果我获得特定图表的精确数据，则会更少。一个例子可能有助于更好
浏览 5提问于2016-11-17得票数 0
回答已采纳
1回答
简单的代码示例 <!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js">&l
浏览 20提问于2019-06-18得票数 2
回答已采纳
我得到了如下数组：
return {
items: [
{active: true, text: 'text1'},
{active: true, text: 'text2'},
{active: true, text: 'text3'},
{active: true, text: 'text4'},
{active: true, text: 'text5'}
...
]
}
我想使用v-for (轻松)在DOM中迭代它，但我想在两
浏览 4提问于2018-02-26得票数 3
回答已采纳
1回答
我使用来自https://github.com/freearhey/vue2-filters的filterBy过滤器。该列表大约有5000条记录。例如，当我按下一个字母时，'a‘过滤大约需要10秒。当我输入一个较长的短语时，大约需要一秒钟。有没有办法在这么大的列表中加速单个字母的过滤？
浏览 10提问于2019-01-22得票数 0
我有一个“基本”函数，它检查数组中的i元素是否与id相同：
checkArray(offer, id){
if (id)
{
this.count=0;
for (var i in offer.specialities) {
if (offer.specialities[i] == id)
{
console.log("bam!")
// this.coun
浏览 11提问于2018-01-31得票数 0
回答已采纳
我是VueJS的新手，在使用VueJS方法调用OrderBy时遇到了一个问题。
我的基本应用程序是检索一个简单的项目数组，这些项目显示在一个表中：
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and
浏览 17提问于2016-09-27得票数 1
回答已采纳
我的问题是，当在JSON中设置"more"：true时，如何在布局中显示“显示文本”
My布局：
<b-row v-for="?" v-if="?">
<b-col>
show text
</b-col>
</b-row>
我的JSON:
{
"array": [
{
"id": "1",
"more": false
},
{
"id
浏览 0提问于2018-09-16得票数 0
我有一个表，它从我的数据中显示ID和标题。我不得不从json中提取标题，json作为字符串保存在数据库中。现在我想在这个表中筛选/搜索。我可以搜索ID，但不能搜索标题。我试过谷歌展示给我的每一件东西，但都没有用。我做错什么了？
我是Vue新来的，有人能帮我吗？
代码：
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search"
single-lin
浏览 6提问于2022-08-09得票数 0
1回答
我试图从表单输入中获取用户输入值。然后，select选项将根据用户输入值禁用某些选择。如何在vuejs中实现此功能？我正在使用bootstrap-vue框架。例如：
表单输入：(用户将在这里键入随机动物名称)
<b-form-input type="text" v-model="animal_name"></b-form-input>
表单选择：(在本例中，我假设用户将输入fish)
<b-form-select class="mb-2 mr-sm-2 mb-sm-0"
浏览 0提问于2018-12-18得票数 0
回答已采纳
2回答
我正在开发Nativescript-Vue应用程序，我试图解决这个问题。
Situation
我从API接收数据。下面是我从api接收的数据结构。
{
"count": 9,
"results": [
{
"id": 1,
"createdOn": "2020-04-08T12:10:46.924551+05:45",
"modifiedOn": "2020-04-08T12:10:47.236475+05:45",
浏览 0提问于2020-04-08得票数 0
回答已采纳
1回答
我有我的vue-router的代码
{
path: '/templates/:id/items/:itemId', component: Item,
name: 'item'
},
在item对象上，我有一个计算属性templateId
templateId() {
return parseInt(this.$route.params.id, 10);
},
我遇到的问题是，每次我在url中添加一个锚点(单击item组件内部的链接)时，即使组件没有改变，也会再次计算该属性。
这意味着将再次计算所有依赖于templateId的计算属性。
，但是
浏览 2提问于2019-06-02得票数 5
回答已采纳
在AngularJS SPA应用程序中，我使用Kendo grid，应用程序使用ui-router进行路由。网站上有一个100行的分层Kendo网格(服务器过滤和分页)。当我单击一个网格行进入配置文件页面时，ui-router大约等待。6-7来摧毁剑道栅格。看起来有很长的时间。是否可以推迟$destroy事件，以便用户转到另一个页面，然后发生$destroy事件？或者有一些变通方法？
我知道这不是问题，因为它防止了内存泄漏，但它看起来很耗时。
浏览 2提问于2017-07-12得票数 0
1回答
我想打印出时间段在20小时或当天之后开始的电影。不管怎样，我都不能让它工作。
组件数据结构：
day:"2017-06-08T18:34:27.211Z"
movies:Array[8]
0:Object
Description:"orphan the becomes a famous magician "
id:1
movieName:"Harry Potter "
time_session:Array[3]
0:Object
id:1
pivot:Object
tim
浏览 0提问于2017-06-09得票数 4
回答已采纳
1回答
我使用的机器人框架4.1.3与Pycharm和铬浏览器和Windows 10机器。如何在此浏览器窗口中选择证书？
我尝试了以下几种方法：
Sleep 5s
${message}= Handle Alert action=ACCEPT timeout=2s
Press Keys ${None} ENTER
Press Keys ${None} \\13
Press Key css=body \\13 # ASCII code for the Enter key
Press Key css=body ENTER
Press Key xpath=//body ENTER
Press
浏览 3提问于2022-04-13得票数 1
回答已采纳
我正在使用Vuex的VueJS 2.x (JavaScript)来获取表中的数据。我还有两个用combobox做的过滤器。通过选择过滤器，我需要过滤以前获得的数据列表。过滤器也可以一起使用。如何恢复筛选器？ 我使用简单的<table>... <tbody><tr v-for="(item, index) in list>...</tr>"</table>和for filter <select><option></option></select> Tnx获取答案。
浏览 21提问于2021-04-28得票数 0
我尝试学习Vue.js，现在已经尝试解决对数组savedMembers的筛选搜索。但我不能让它起作用。
数组名称: savedMembers
数组、firstName、lastName和电子邮件中的变量
搜索字段:搜索
如何添加响应搜索？
如何使用保存的成员更新视图？
我想要一个过滤器函数来过滤数组的所有值。但只要我能用名字过滤就行了。
这是我的index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv=
浏览 2提问于2021-03-14得票数 0
回答已采纳
1回答
ZMQ发布/订阅
、、、
关于ZMQ的pub/sub功能，我很难弄清楚如何订阅一个特别的“频道”。
下面是发布者：
var zmq = require('zmq');
var pub = zmq.socket('pub');
pub.bindSync('tcp://127.0.0.1:5555');
setInterval(function(){
pub.send('pub msg');
},500);
下面是订阅者：
var sub = zmq.socket('sub');
sub.connect('tcp://1
浏览 2提问于2015-04-28得票数 4
回答已采纳
1回答
vueJs分页和过滤
、、、
如何处理vueJs 中的分页过滤
<div class="col-xs-6 col-md-4" v-for="item in items | limitBy count offset | filterBy name in 'name'">
浏览 2提问于2016-02-28得票数 1
回答已采纳
1回答
我是这个网站的新手，也是DirecShow编程新手。见到你很高兴。
我正在编写一个DS应用程序，它可以从摄像机视频流中抓取静止图像。我实际需要的是抓取静态图像并将它们保存在磁盘上，这样我就不需要在窗口上渲染视频流。我认为，这种方式可以节省一些CPU消耗。
我该怎么做呢？
浏览 0提问于2014-11-21得票数 0
2回答
我将在过去的几天里学习vuejs。我必须为特定的列应用搜索过滤器。在vuejs文档中给出的网格组件示例中，它搜索所有列。
教程链接
gridData: [
{ name: 'Chuck Norris', power: Infinity },
{ name: 'Bruce Lee', power: 9000 },
{ name: 'Jackie Chan', power: 7000 },
{ name: 'Jet Li', power: 8000 }
]
我必须仅对name列应
浏览 1提问于2018-06-21得票数 0
1回答
我有个波乔：
public class RoomData implements Parcelable {
private String objectId, name, building, floor, imageUrl;
private boolean hasPc, hasProjector, hasTelepresence, hasWhiteboard;
private boolean dataReady = false;
private ArrayList<MeetingData> meetingData = new ArrayList<M
浏览 2提问于2015-08-10得票数 1
回答已采纳
问题
我有五个模特：
class Features(models.Model):
name = models.CharField(max_length=100, unique=True)
class Filter(models.Model):
name = models.CharField(max_length=100, unique=True)
class Model(models.Model):
name = models.CharField(max_length=200, unique=True)
class TrainSet(models.Model
浏览 0提问于2018-08-09得票数 0
我有一个简单的模板，可以迭代一些项：
<template v-for="card in filteredCards">
filteredCards是我通过单击一个简单的html链接来过滤某些结果的属性。在我的Vue组件中，我有以下内容：
data = {
cards: '',
filteredCards: ''
}
cards是通过ajax请求获得的原始数据，而filteredCards实际上是我正在迭代的内容。
当我使用过滤器进行任何类型的更新时，问题就变成了--模板没有反映过滤后的数组。下面是我过滤的方法：
thi
浏览 3提问于2016-01-29得票数 0
我的过滤器看起来是这样的：
{
type: 'boolean',
dataIndex: 'FutureProfile',
value:false,
defaultValue : false
},
这不会为我的数据添加任何类型的默认筛选。这会使表中的每一行返回。
如果我这么做：
{
type: 'boolean',
dataIndex: 'Futu
浏览 4提问于2014-08-15得票数 0
回答已采纳
2回答
我有一个带有select过滤器的组件表单：
<template>
<div class="form-group">
<select name="" v-model="filterRev" @change="filterReviews(filterRev)" class="form-control" id="">
<option value="0"&
浏览 0提问于2019-02-06得票数 1
回答已采纳
我想从assoctivate数组中删除空行，即其值为空。
array[0]
a => '101'
b => '105'
c => '103'
array[1]
a => ''
b => ''
c => ''
array[2]
a => '101'
b => '105'
c =>
浏览 0提问于2018-08-02得票数 0
回答已采纳
让我说，我有一个产品，可以找到三个不同的类别，例如。ID 104、115和126。
现在我想要一个由产品组成的产品集合，这也应该在这三个类别中找到。这意味着具有cat id 104和115的产品不应该在收藏中，因为126丢失了。
我该怎么做？:-)
回复Ape的回答：
尝试过你的方法。我的代码的第一部分如下：
$_year = $_product->getBbYear();
$_yearInterval = $this->getYearInterval();
$_minYear = $_year - $_yearInterval;
浏览 0提问于2016-03-30得票数 0
1回答
数据属性中有以下元素
templateArray: [{"id":"7","itemId":"17520","itemName":"Arrow Bounce","thumbName":"ARROWBOUNCE","dateAdded":"2016-05-20 16:33:42","renderTime":"30","tested":"1","projectPath
浏览 0提问于2018-10-16得票数 0
回答已采纳
2回答
Vuejs变异对象作为道具传递
、、、、
如果我将一个对象作为支柱传递(引用)，那么可以在支柱中修改值吗？
我正在开发一个web应用程序，它需要将大量的值传递给组件，并且我正在试图找到将值传递给组件并返回给父组件的最佳方法。
从我所读到的所有内容来看，突变道具是做事情的错误方式，因为下次更新组件时，值将被传递回覆盖突变的子组件。但是只传递对对象的引用，因此对对象支柱中的值的任何更改都发生在父组件中的原始对象上。同样，Vuejs也不会抱怨当这种情况发生时会改变道具。
const subComponent = {
name: "subComponent",
template: `
<div>
浏览 9提问于2019-09-17得票数 5
回答已采纳
1回答
我在R中运行一个嵌套的for循环，我从一个SQL查询中创建了一个名为dataframe的dataframe。我的数据被分成三个数据库组。以下是
CampaignGUID-它有一个列，通过它，我引用其他列dataframe
for (i in length(nrow(dataframe$CampaignGUID))){
sql1 <- paste("SELECT T.TenantLookupID, T.TenantShortCode,
B.BusinessUnitShortCode, C.CampaignShortCode
from Tenant
浏览 1提问于2017-11-24得票数 0
回答已采纳
1回答
为什么过滤器不起作用？
错误提示: Vue warn:无法解析筛选器:大写。
不确定原因，但过滤器不工作。另外，这是对此功能进行编码的最佳方式吗？有没有什么方法可以做到这一点，或者是建议的方法？我不确定是否要使用$refs，也许我可以做得更简单，但要有效地使用可重用组件。
我正在尝试通过使用随机消息和状态来模拟Ajax响应。
链接：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=&#
浏览 4提问于2017-07-28得票数 1
回答已采纳
我正在创建几个链接，当点击它们时，网页应该显示一些图像或其他图像，为此，我在vue的对象方法中有一些函数，每个函数负责过滤一组图像并显示触摸到的图像。到目前为止，一切都是正确的，问题是当我必须引用这些函数时，因为调用这些函数的元素是用v-for以下面的方式创建的：
<li v-for="categorie in categories">
<a @click="categorie">{{categorie}}</a>
</li>
我的反应变量categories是一个由5个字符串组成的数组，其中只包含名称，那么，当我
浏览 4提问于2019-03-02得票数 1
1回答
同时遍历目录中的所有文件
、、、
我在一个循环中有一个a循环，外部循环只是遍历目录中的每个文件，然后运行内部循环
我可以选择多个文件，同时在这些文件上运行内循环吗
我使用的是一个32核的100 32内存服务器。我目前只使用了1%的CPU，1乘1
我想通过同时运行多个文件来加快速度，能够最大限度地利用我的超级计算机并减少时间
浏览 5提问于2016-12-29得票数 0
1回答
问题是关于VueJS框架-元素：
我有一些表(el- table )从数组中获取数据：
<el-table :data="someData">
<el-table-column prop="id" label="№"></el-table-column>
<el-table-column prop="is_active" label="Active"></el-table-column>
</el-table>
axios从DB获得JSON，数
浏览 0提问于2018-01-25得票数 0
回答已采纳
2回答
我开始在Firebase (和VueFire)中使用VueFire，但是我开始为如何构造数据而挣扎。
我的案子很简单。
我有一份供应商名单和一份产品清单。
一个产品只能链接到一个供应商，一个供应商可以有多个产品。
我有不同的看法：
所有供应商的所有产品清单
一个供应商的产品清单
向供应商提供一种产品的详细信息。
对于第一和第二视图，我对以下结构没有异议
products
- productKey1
- name : Product1
- productKey2
- name : Product2
supplier-produc
浏览 5提问于2017-08-02得票数 3
我从数据中得到一个样本数组
data() {
return {
states: [{id:1,name:"AL"},{id:2,name:"AK"},{id:3,name:"CA"},{id:4,name:"TX"},{id:5,name:"WI"},{id:6,name:"WY"}]
}
}
..。视图模板
<template>
<div :id="states[2].id">
This is California
浏览 5提问于2022-10-08得票数 0
1回答
我使用VueJS遍历shopify liquid对象，如下所示： items: [
{% for product in collections['components'].products %}
{
title: "{{ product.title }}",
handle: "{{ product.handle }}",
image: "{{ product.featured_image | img_url:
浏览 68提问于2021-06-24得票数 0
我有许多包含以下类型的行的文件-
* @version $Revision: 1.xxx
我希望在使用winmerge进行比较时忽略这种类型的行。我已经尝试过线过滤器。但是，直到无法做到这一点。在这方面，有没有人可以帮我？
浏览 4提问于2015-04-21得票数 3
回答已采纳
1回答
我正在构建一个包括实际成本和预算的Power仪表板。总结成本并不是个问题。预算数额作为每周数额输入一个表格，例如1 000美元。我们使用一个自定义会计日历，它规定每个月的周数。每个季度的第二个月为5周，而所有其他月份为4周。1月是4周，2月是5周，3月是4周，4月是4周，5月是5周，6月是4周，7月是4周，8月是5周，9月是4周，10周是4周，11月是5周，12月是4周。
我需要一个循环变量在DAX中，它将简单地计算周数，根据月切割机选择的月份。然后我可以把周数乘以每周预算金额。
这里有一个实际的例子:如果我选择一月，二月，三月，四月，那么周数应该是17周。预算金额应该是17,000美元。
我
浏览 1提问于2019-08-13得票数 0
回答已采纳
在计算函数中，当提供多个筛选器表达式时，如何应用筛选器？
示例：
计算(费用，filter1，filter2)
第一个过滤器接受整个过滤器上下文(所有表都涉及到关系)，并将filter1应用于它。然后对第二个过滤器分别做同样的操作。然后，它交叉上述两个结果，并在结果数据集上执行计算表达式？
我很困惑，因为如果以上是正确的，那么如何使用值覆盖任何应用的过滤器(例如，使用ALL)？
浏览 5提问于2020-11-27得票数 0
回答已采纳
2回答
我使用的是核心数据和故事板。我有一个UITableView和一个UIViewController。当我向我的实体添加实体时，它会被添加到我的上下文(数据库)中，但当我返回时，它不会反映在表视图中。我必须再次运行我的应用程序，当我可以看到我添加的条目时。下面是我添加新对象的方式：
- (void)viewDidLoad
{
[super viewDidLoad];
myAppDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];
self.managedObjectContext =
浏览 3提问于2012-01-11得票数 0
2回答
不幸的是，对于我来说，在VueJS中不能使用parseInt()函数进行秒到分钟的计算。我使用以下公式从秒计算分钟：
parseInt(this.seconds / 60, 10) % 60
但是，this.seconds值始终在59秒后返回0，而不是60，因此parseInt()函数始终返回0。我现在倒霉了。下面是完整的代码：
new Vue({
el: '#app',
data: {
hours: 0,
minutes: 0,
seconds: 0
},
methods: {
t
浏览 0提问于2016-12-20得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
