嵌套数据上的Vue过滤表比基本CSS慢答案

【问题标题】：Vue filtering table on nested data slower than basic CSS嵌套数据上的Vue过滤表比基本CSS慢
【发布时间】：2019-08-26 12:14:00
【问题描述】：

我正在将旧的 MVC 代码移至 Vue。我有一个对象数组 A（计数 > 60），这些对象包含一个嵌套的对象数组 B。

数组 A = [{name: A, arrayB: B}, ...{}]

基于搜索文本，我正在过滤内部数组B中的项目。

我尝试使用此模式https://codepen.io/AndrewThian/pen/QdeOVa，并使用计算过滤列表。但是，这比我的 vanilla JS 运行速度要慢得多，后者循环整个列表并设置可见性：隐藏和高度：0。特别是，当我清除搜索文本时，它似乎运行非常缓慢，添加所有元素桌子放回去了。

过滤列表（）{ if (this.searchText == "") return 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-show 也比我的香草版本慢得多。我看到的所有东西似乎都不是为此而设计的。

【问题讨论】：

标签： javascript vue.js model-view-controller

【解决方案1】：

我假设您在 v-for 中使用过滤后的数据，并从数据中生成 DOM 元素。

您应该创建一个组件，负责从表中渲染一行并使用 props 将行数据发送给它。

之所以这样更快，是因为 Vue 在数据发生变化时会重新渲染整个组件，而在使用组件时，只会重新渲染发生变化的组件，这会导致渲染速度更快。

不要忘记在你的 v-for 上使用 :key，否则 Vue 将无法缓存组件。此外，索引不是键的良好候选者。在您的情况下，可能 Name 是一个更好的候选人。

【讨论】：