美文网首页js
Lodash使用避坑小结

Lodash使用避坑小结

作者: 一名有马甲线的程序媛 | 来源:发表于2021-06-12 15:49 被阅读0次

    Array篇

    1. 使用 Lodash 的 remove 方法删除数组项后,视图不更新

    想从数组中按照某种筛选条件移除数组的一个元素时,很容易想到使用splice或者filter来操作:

    /* 从数组arr中移除值为val的元素 */
    let index = arr.indexOf(val)
    index !== -1 && arr.splice(index, 1)    
     
    /* 从数组arr中移除满足predicate条件的元素 */
    arr = arr.filter(predicate)
    

    要删除数组中某项数据时,如果用 splice,需要知道当前被删除项的下标 index,先用唯一标记节点 id 找到对应的 index,再进行移除操作。过程略微繁琐,所以我想到了用 Lodashremove

    /* 从数组arr中移除满足predicate条件的元素 */
    _.remove(arr, predicate)
    

    但是好景不长,在控制台中看到数组已经被成功移除了,但页面上依然显示了那个被我删掉的元素,真是个打不死的小强!而且我确定一定以及肯定该数组进行了双向绑定。带着疑惑上网一搜,果不其然, Lodashremove有坑!!! 点击查看原理解析
    原因就是:vue通过改造观察数组的原型方法使它操作对应方法时会触发更新响应,而Lodashremove方法使用 Array 原型中的 splice 方法对数组进行操作,因此不会触发响应更新。
    最后我只能又乖乖的用 splice 来实行数组的移除了...

    本文会持续更新,敬请期待把~

    相关文章

      网友评论

        本文标题:Lodash使用避坑小结

        本文链接:https://www.haomeiwen.com/subject/sxkieltx.html