javascript - 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's official migration guide 建议为此使用计算属性。

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

{
    ...Other component properties...

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

希望这对您有所帮助。

编辑:Here's a pen displaying this.