Vue3+Lodash：2023年了，我依然在使用Lodash

news2024/11/15 20:12:10

前言：

为什么选择lodash?

看看lodash的地位

如何使用lodash？

1.安装lodash

2.引入lodash

我们到底还需不需要lodash？

再举一些例子

前言：

前两天，在水群的时候，发现居然有人不知lodash，这可把我吓了一跳，lodash难道都不被前端人所知了吗？Lodash官网

为什么选择lodash?

借用lodash的话：

Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法非常适用于：

遍历 array、object 和 string
对值进行操作和检测
创建符合功能的函数

可能你还是觉得lodash对你没啥吸引力，这么说吧，lodash最为前端社区里面一个最出名的工具库，提供了很多很多高效率，高兼容性的工具函数；比如将一个数组按照固定数量进行切割，用一个节流防抖的函数，深度克隆等等诸多常用的函数！

看看lodash的地位

如何评价一个项目厉害不厉害，点赞数，下载量是最直观的！

如何使用lodash？

1.安装lodash

npm i --save lodash

2.引入lodash

全局引用（当然不推荐使用）：

main.js

index.vue; 随便用个lodash的封装方法，这里使用random，随机生成0-10之间的数字

<script setup>
  import {getCurrentInstance} from "vue"
  const {proxy} = getCurrentInstance()
  console.log(proxy.lodash.random(0,10))
</script>

2. 按需引入

按需引入其实有挺多种方式的，我会一一举例说明，依然用lodash的random举例，main.js里面就不要再引入lodash之类的

1.10-100的随机数

<script setup>
  import _random from "lodash/random"
  console.log(_random(10,100))
</script>

2.100-1000的随机数

<script setup>
  import {random} from "lodash"
  console.log(random(100,1000))
</script>

3.1000-10000的随机数

<script setup>
  import {random as _random} from "lodash"
  console.log(_random(1000,10000))
</script>

具体哪个好用的话，看具体的情况和个人喜好，我说说我的，我目前主要是使用的是方案1，因为 _xxx 函数能让我在回看代码的时候，就知道此函数就是lodash内的函数，更易解读。

lodash还有更多简易有用的函数，都是开发者多年的开发中提炼出来的，经过了千锤百炼，非常可靠！

我们到底还需不需要lodash？

我的答案是需要，虽然在日常的工作中，我们会经常使用js的原生的语法，觉得lodash封装的好像用起来还更麻烦了，但是我还是依然推荐把lodash作为额外的工具库进行使用，在写项目是形成一种原生的js语法为主，lodash为辅的模式！比如当涉及到使用深拷贝，节流防抖的时候，我们直接拿lodash中的使用即可，非常的方便，而且也不会导致代码的冗余，再也不用从别的地方复制相关代码。而且我们还可以看看lodash的源码，学习学习前辈的代码，何乐而不为？

那既然lodash这么牛，为何感觉在当下却显得没那么流行了呢？

一来，近些年浏览器和web的技术发展的比较迅速，ie都退场了，浏览器对es语法的支持度更好了，兼容性这个词提及的似乎越来越少了。二来，编译工具可以把es6+的代码编译为浏览器支持的es5，高阶语法的兼容性也得到了更好的解决。

但作为顶级的js工具库，当然有其可取之处。至于用或不用，仁者见仁智者见智！

再举一些例子

filter

  import _filter from "lodash/filter"
  const list = [{name:'aa',age:10},{name:'bb',age:18},{name:'aa',age:30}]
  console.log(_filter(list,item=>item.age>18)) //lodash
  console.log(list.filter(item=>item.age>18)) //原生

sum

  import _sum from "lodash/sum"
  const list = [1,2,3]
  console.log(_sum(list))
  
  function getSum(total, num) {
    return total + num;
  }
  console.log(list.reduce(getSum))