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过滤器递归？

1 个答案: