Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。可以极大的提升前端开发者的工作效率。下面我们就介绍一下如何在 Vue 中使用 Lodash。
安装 Lodash
# Yarn
yarn add lodash
# NPM
npm i -g npm
npm i --save lodash
在 Vue 中使用 Lodash
一般情况下,我们是在 Vue 组件的基础上导入所需的 Lodash 函数,可以导入整个 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 库并不是最优解,我们还可以按需导入。
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. 命名导入+重命名
您可以使用as
将其重命名为您想要的任何名称用来区分函数。一般情况下使用_
+函数名:
<script>
import { range as _range, random as _random } from 'lodash';
const range = _range(1, 3);
const random = _random(0, 5);
</script>