Таблица фильтрации Vue для вложенных данных медленнее, чем базовый CSS

Question

Я перемещаю старый код MVC в Vue.У меня есть один массив объектов A (количество> 60), и эти объекты содержат вложенный массив объектов B.

массив A = [{name: A, arrayB: B}, ... {}]

На основе поиска текста я фильтрую элементы во внутреннем массиве B.

Я пытался использовать этот шаблон https://codepen.io/AndrewThian/pen/QdeOVa, с вычисленным отфильтрованным списком.Тем не менее, он работает намного медленнее, чем мой ванильный JS, который перебирает весь список и устанавливает видимость: hidden и height: 0. В частности, когда я очищаю текст поиска, кажется, что он работает очень медленно, добавляя все элементыобратно в таблицу.

FilterList () {if (this.searchText == "") возвращает this.categories;

                let filteredArray = new Array();
                this.A.forEach(outerElement=> {

                    let innerObj = new Object();
                    innerObj.Name= outerElement.Name;
                    innerObj.List= new Array();
                    outerElement.List.forEach(innerElement=> {
                        if (innerElement.Name.toLowerCase().includes(this.searchText.toLowerCase())) {
                            //show = true;
                            innerObj.List.push(innerElement);
                        }
                    })
                    if (innerObj.List != undefined && innerObj.List.length > 0) filteredArray.push(innerObj);
                })
                return filteredArray;
            }

Есть ли лучший способ эффективного подхода к фильтрации вложенныхтаблица данных в Vue?V-шоу было намного медленнее, чем моя ванильная версия.все вещи, которые я вижу, не предназначены для этого.

Answer 1

Я предполагаю, что вы используете отфильтрованные данные в v-for и генерируете элементы DOM из данных.

Вам следует создать компонент, который позаботится о рендеринге строки из таблицы и отправить ей данные строки с помощью реквизита.

Причина, по которой это происходит быстрее, заключается в том, что Vue перерисовывает весь компонент при изменении данных, но при использовании компонентов перерисовывается только измененный компонент, что приводит к более быстрому отображению.

Не забудьте использовать : ключ на вашем v-for , иначе Vue не сможет кэшировать компоненты. Кроме того, индекс не является хорошим кандидатом на ключ. Вероятно, Имя является лучшим кандидатом на ваше дело.