代码之家  ›  专栏  ›  技术社区  ›  Simon Trichereau

如何使Vue过滤器递归?

  •  0
  • Simon Trichereau  · 技术社区  · 7 年前

    我有一个功能需要在不同的组件中使用,所以我决定制作一个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 在我的情况下?谢谢你。

    1 回复  |  直到 7 年前
        1
  •  0
  •   3limin4t0r    7 年前

    首先,我不是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);
    }