当前位置：首页 > article >正文

Vue3-TS-Lodash：理解Lodash / 常用方法积累

article 2024/10/7 14:40:09

一、Lodash官网

Lodash 简介 | Lodash中文文档 | Lodash中文网

二、理解Lodash

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。它提供了大量的函数来帮助你处理数组、数值、对象、字符串等，使你的代码更加简洁、易读和高效。Lodash 的设计哲学是让你能够使用函数式编程的方法来操作数据，同时避免修改原始数据（除非明确指定）。

三、Lodash具备哪些能力

序号	能力	解释
1	数组 / Array	如过滤、映射、排序、分块、去重、查找、比较等
2	集合 / Collection	如并集、交集、差集、子集、筛选等
3	函数	如柯里化、防抖、节流、合成、条件判断等；
4	语言	提供了一系列用于检查类型、验证值等的函数
5	数学	如求和、平均数、最大值、最小值、随机数等；
6	数字	clamp(number, [lower], upper)返回限制在 `lower` 和 `upper` 之间的值。 inRange(number, [start=0], end)检查 `n` 是否在 `start` 与 `end` 之间 random([lower=0], [upper=1], [floating])产生一个包括 `lower` 与 `upper` 之间的数
7	对象	如深拷贝、合并、遍历、转换、比较等
8	Seq	Seq 模块（或称为序列）提供了一种链式调用的方式来处理数据，同时支持惰性计算（Lazy Evaluation），这意味着只有在需要最终结果时，才会执行链中的操作。这种机制可以显著提高处理大数据集时的性能，因为它允许在数据实际被使用之前避免不必要的计算。
9	字符串	如切割、重复、填充、大小写转换、字符串匹配、转义等；
10	实用函数
11	Properties
12	Methods
Lodash虽然提供了很多方法，但并不意味着在实际开发中一定要全部使用。在使用Lodash时，应根据实际需要选取合适的方法，以提高代码的可读性和执行效率。

四、vue3 ts 项目安装

4.1、安装

pnpm install lodash
pnpm install @types/lodash

4.2、全局引入

在项目的入口文件（main.ts）中全局引入Lodash，并将其挂载。
但请注意，这种方式虽然方便，但可能会增加项目的打包体积，因为Lodash是一个相对较大的库。

main.ts

import _ from 'lodash' 
app.config.globalProperties.$lodash = _

import { createApp, getCurrentInstance } from 'vue'
import './style.css'
import '@v3/assets/styles/tailwind.css'
import '@v3/assets/styles/reset.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import router from './routers/index'
import { api } from './api/index'
import 'vue-global-api'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import _ from 'lodash' 

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
const app = createApp(App)
app.use(ElementPlus)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.use(pinia)
app.use(router)
app.config.globalProperties.$api = api
app.config.globalProperties.$lodash = _ 
app.mount('#app')

页面使用

<script setup lang="ts">
let Lodash = internalInstance && internalInstance.appContext.config.globalProperties.$lodash
getUser(params).then((res: any)=>{
    console.log('lodash', Lodash.hasIn(res, ['payload']))
    // true
}
</script>

感觉比较麻烦，后边找找看简便方法

出于性能和打包体积的考虑，通常不推荐全局引入Lodash。更好的做法是按需引入。

4.3、按需引入

在组件或文件中，根据需要引入Lodash的特定函数。这样做的好处是可以只引入你需要的函数，从而减小项目的打包体积。

<script setup lang="ts">  
import { defineComponent } from 'vue'  
import { debounce } from 'lodash'  
  
// 使用debounce函数  
const handleInput = debounce((value: string) => {  
   console.log(value)  
}, 500)  
</script>  
  
<template>  
  <input type="text" @input="handleInput($event.target.value)" />  
</template>

五、配置TypeScript以支持Lodash

由于你已经安装了@types/lodash，TypeScript应该能够自动识别Lodash的类型定义。但是，如果你在使用TypeScript时遇到了与Lodash相关的类型错误或警告，请确保你的tsconfig.json文件配置正确。特别是，如果你的项目中使用了ES模块导入方式，并且遇到了默认导入的警告，你可能需要在tsconfig.json中添加以下配置

{  
  "compilerOptions": {  
    "allowSyntheticDefaultImports": true,  
    "esModuleInterop": true  
  }  
}

六、常用方法

6.1、hasIn

let result = hasIn(res, ['payload']) ? res.payload : []

对象路径正确返回 true ，否则 false

<script setup lang="ts">
import { hasIn } from 'lodash'
getUser(params).then((res: any)=>{
    console.log('lodash-hasIn', hasIn(res, ['payload']))
    // true 测试成功
}
</script>