Question

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

array A = [{{name：A，arrayB：B}，... {}]

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

我尝试将此模式https://codepen.io/AndrewThian/pen/QdeOVa与计算出的过滤列表一起使用。但是，它的运行速度比我的香草JS慢得多，后者在整个列表中循环并设置可见性：hidden和height：0。特别是，当我清除搜索文本时，添加的所有元素似乎真的很慢桌子放回去。

filteredList（）{ 如果（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-show也比我的香草版慢得多。我看到的所有东西似乎都不是为此目的而设计的。

Answer 1

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

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

之所以更快，是因为Vue在数据更改时重新渲染了整个组件，但是在使用组件时，仅重新渲染了更改后的组件，从而加快了渲染速度。

不要忘记在 v-for 上使用：key ，否则Vue将无法缓存组件。同样，索引也不适合作为密钥。在您的案子中，姓名可能是更好的选择。

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

1 个答案: