如何使 Vue Filter 递归？

Question

我有一个功能需要在不同的组件中使用，所以我决定制作一个 vue 过滤器。问题是该函数是递归的，它会调用自己，但我不知道在 Vue 过滤器中该怎么做。

事实上，我解决了这个问题，但我对我的解决方案并不满意，在过滤器的参数中我给出了 vue 的实例，然后从给定的实例中再次调用过滤器......

-- component.vue
if (this.$options.filters.arraysAreEquals(array1, array2, this)) {
    console.log("Arrays are equals")
}


-- main.js
Vue.filter('arraysAreEquals', (x, y, self) => {
    if(x.length != y.length){
        return false;
    }
    if(x instanceof Array) {
        if(!(y instanceof Array)){
            return false;
        }
        for(let i = 0; i < x.length; i++) {
            if(!self.$options.filters.arraysAreEquals(x[i], y[i], self)){
                return false;
            }
        }
    } else {
        return x == y;
    }
});

所以我的问题是如何我应该如何在不提供 vue 实例的情况下进行递归（self 在我的例子中）？谢谢。

Answer 1

首先我不是Vue.js用户，但是做递归是很简单的。您面临的问题是由于该函数是匿名的。根据定义，这些可以不是递归的（当没有分配给像变量或名称这样的句柄时），因为它们没有句柄来调用自己。要解决此问题，只需先将函数存储在变量中（或创建命名函数）。

let filter = (x, y) => {
    if (x.length != y.length) return false;
    if (!(x instanceof Array)) return x == y;
    if (!(y instanceof Array)) return false;

    for (let i = 0; i < x.length; i++) {
        if (!filter(x[i], y[i])) return false;
    }
};

Vue.filter('arraysAreEquals', filter);

通过将匿名函数分配给一个变量，我们创建了一个简单的句柄供我们在函数内部调用。

在使用此方法时请记住，您不应重新分配 filter 变量，因为这会影响递归调用。

let kaas, other;

kaas = (baas = false) => baas ? 'baas' : kaas(true);
console.log('kaas() //=>', kaas());

other = kaas;
console.log('other() //=>', other());

kaas = true;
try {
  console.log('other() //=>', other());
} catch (error) {
  console.error(error.message);
}

如何使 Vue Filter 递归？

How to make Vue Filter recursive?

javascript

recursion

vuejs2

vue-filter