如何在 Vue 中使用 Lodash
Lodash 是一个功能强大的 JavaScript 库，里面包含许多实用的小功能🍬。这些功能不像万圣节糖果那样需要你绕着街区跑圈消耗卡路里，而是常见的实用函数，让你避免重复造轮子👍。而且，像我这样在创业项目上工作的人，它能帮助我快速上手🦸♀️。
安装带有 Vue 的 Lodash
# Yarn
yarn add lodash
# NPM
npm i --save lodash
在 Vue 中使用 Lodash
在 Vue 应用中使用 Lodash 的典型方法是，在每个 Vue 组件上导入所需的函数。接下来我将向你展示的就是这种方法。
但如果你想在所有 Vue 组件中使用 Lodash，我在Stack Overflow上找到了一些教程。这种方法也有一些缺点，所以务必仔细阅读相关讨论。我个人并不推荐这种方法，因为我认为最好是每个组件只导入你需要的函数，而不是导入整个库。不过，最终决定权在你 🙂
好的，接下来我们继续看看如何在 Vue 组件中使用 Lodash 🎢
A. 导入整个 Lodash 库
您可以通过以下方式导入 lodash 的所有组件：
<script>
import _ from 'lodash';
const range = _.range(1, 3); // [1, 2]
const random = _.random(0, 5); // an integer between 0 and 5
</script>
B. 导入 Lodash 特定函数
我并不推荐导入整个 Lodash 库。如果你看看他们的文档，就会发现里面有很多函数🤯。全部导入会给系统增加很多不必要的负担。Lodash 压缩后大约只有 24kB（不算特别大）。但我喜欢把它想象成我旅行时的行李打包方式。如果你夏天去夏威夷🏝，为什么要把宝贵的行李箱空间浪费在冬天的衣服上呢？所以我们也应该用同样的方式对待应用程序的包大小。我们应该避免添加不必要的功能，以免应用程序体积过大。精简的包意味着更快的用户体验，太棒了👏
B-1. 默认导入
您可以直接从指定路径单独导入它们。
<script>
import _range from 'lodash/range';
import _random from 'lodash/random';
const range = _range(1, 3);
const random = _random(0, 5);
</script>
B-2. 指定进口
您也可以直接单独导入lodash。
<script>
import { range, random } from 'lodash';
const range = range(1, 3);
const random = random(0, 5);
</script>
B-3. 命名导入 + 重命名
但我喜欢区分我的 Lodash 函数。所以你可以用 `@ asLodash_function` 来重命名它，改成你想要的任何名字。约定是 `@Lodash_function` _，所以我直接在我的函数名前面加上这个前缀。
<script>
import { range as _range, random as _random } from 'lodash';
const range = _range(1, 3);
const random = _random(0, 5);
</script>
B-1 获胜！
我个人比较喜欢B-1，因为我总是喜欢清晰地标识 Lodash 函数。当然，我也可以选择B-3，虽然它把所有功能都放在一个导入语句里，但我仍然需要处理那些单独的重命名操作。所以我觉得B-1对我来说最简洁，也更易读。
改进讨论💛
正如你所见，许多编程决策都相当主观。我知道有些人会非常热衷于将自己的立场奉为圭臬。但大多数编程选择都是主观的，计算机其实并不在意。没错，有一些约定俗成的规则是大多数人都认可的。但如果你认为这些规则不适合你和你的团队，那么打破常规也无可厚非。我认为更重要的是保持一致性。如果你选择了一条规则，就坚持下去。这会让你的团队其他成员更容易快速理解你的代码。
我觉得大家能如此热情地讨论真是太棒了。我最喜欢的是永远没完没了的tabs“对”与“对”的争论space😂——看到双方都如此投入，真是太有趣了🔥。只要我们以尊重和同理心来对待这些讨论，我认为这样的辩论就很好。然而，如果缺乏尊重和同理心，这些讨论就会变得有害。而当这种情况发生时，不仅不好玩，甚至会让人感到害怕。人们会选择置身事外，不再参与讨论。但我们其实希望大家都能参与进来，因为只有这样我们才能找到更好、更有创意的解决方案。
所以下次当你参与讨论时，让我们都假设对方的意图是好的，尊重不同的观点，并运用同理心。我认为这样会让讨论更有建设性，也更有趣💛
你真的需要 Lodash 吗？
如果是小型应用，我根本不会考虑 Lodash。我通常把它用在大型应用上。如果你只是和朋友吃个午饭，你会真的带上整个行李箱吗？我觉得一个钱包或小包就足够了。当然，凡事都有例外！而这些例外情况取决于你的具体情况，最了解你的人就是你自己！所以，选择适合你的方式。我的原则是先从少量开始，如果实际情况需要更多，再逐步增加。👍
你不需要 Lodash
既然你已经问了自己是否真的需要 Lodash，那么让我进一步阐述我的观点，并向你推荐这个很棒的代码库 👉你不需要 Lodash。有了现代 JavaScript，你可以用原生代码完成很多事情。而且，自然才是王道😆
以下是三个例子：
筛选
const array = [1, 2, 3, 4, 5];
// Lodash
_.filter(array, value => value > 3);
// ✅ Vanilla
array.filter(value => value > 3);
压平
const array = [1, [2, [3, [4]], 5]];
// Lodash
_.flatten(array);
// ✅ Vanilla
array.flat();
以……结束
// Lodash
_.endsWith('abc', 'c');
// ✅ Vanilla
'abc'.endsWith('c');
结论
哈哈，这篇文章本来是讲如何使用 Lodash 的，结果后半部分我却一直在劝你别用它。人生就是如此，对吧😂 JavaScript 自诞生以来发展迅猛。现在有了更多原生函数，编程也方便多了。而且，掌握原生 JavaScript 对你的职业发展远比精通 Lodash 要好得多。不过，也别害怕使用 Lodash。它确实有一些非常实用的函数，可以避免你浪费时间重复造轮子。这意味着你可以把更多的时间花在开发应用上，而不是费心去开发工具。
我的经验法则是，先从纯 JavaScript 开始，等它功能穷尽之后再引入 Lodash。我最喜欢的一句话是—— “你怎么知道？现实会告诉你。” 😄
资源
感谢阅读❤
更多文章请访问samanthaming.com
| 🌟推特 | 👩🏻💻 SamanthaMing.com |