v-for 中的 vue.js 过滤器

Question

我想知道在 vue 中使用过滤器

我知道计算，当我使用它时，但我的问题是

我使用此代码对水果数组进行排序，而不是使用计算

<li v-for="fruit in fruits.sort() ">{{fruit }}</li>

它运行了，我得到了正确的结果

但控制台通知我错误

[Vue warn]: You may have an infinite update loop in a component render function. 
(found in <MyFilter> at C:\xampp\htdocs\projects\max\___explaning\169_filters_mixins\src\MyFilter.vue)
warn @ VM6599:564
flushSchedulerQueue @ VM6599:2340
(anonymous) @ VM6599:511
nextTickHandler @ VM6599:460

当我删除 .sort() 时，警告消失了

问题：为什么会出现这个警告，有没有办法在不使用计算值的情况下将 .sort() 添加到 v-for 数组

Answer 1

您收到错误是因为在v-for语句中调用fruit.sort()时创建了一个无限循环。

fruit.sort()导致数组发生变异（更新），当 Vue 收到此更新的通知时，它会尝试更新 DOM，然后评估v-for语句。 这将再次调用fruit.sort() ，然后触发更新。

天真的答案：

相反，您可以使用v-for="fruit in fruits.map(f => f).sort()" ，尽管如果列表有点大，这可能会变得非常繁重。 这样做有两件事：1) fruits.map(f => f)创建一个包含与fruits相同值的新数组，然后 2) 对新创建的数组进行排序。

更好的答案：

而不是在模板内内联复制和排序（它不应该在的地方，您可以使用一种方法相同。您希望将尽可能多的逻辑放在模板之外。

{
    ...Other component properties...

    methods: {
        sorted(arr) {
            // Return a copy of the sorted array
            return arr.map(e => e).sort()
        }
    }
    
    ...Other component properties...
}

还有更好的答案：

如果您一直在使用 Vue 1.x，则可以为此使用过滤器（ v-for="fruit in fruits | orderBy" ，但在文本插值之外使用过滤器（ {{ }} ）已从 Vue 2 中删除.x 而不是Vue 的官方迁移指南建议对这个确切的事情使用计算属性。

现在，我仍然建议不要在计算属性中更改数组，而是先复制数组然后对其进行排序，或者甚至可以按照他们的指南使用 lodash 的orderBy(...)函数。

{
    ...Other component properties...

    computed: {
        sortedFruits() {
            // Return a copy of the sorted array
            return this.fruits.map(f => f).sort()
        }
    }
    
    ...Other component properties...
}

希望这可以帮助。

编辑：这是一支显示这个的笔。

Answer 2

根据文档，数组突变方法也会导致更新，这就是您遇到无限循环的原因。 换句话说，您正在使用v-for指令渲染列表中的项目，然后再次使用排序突变方法。