前端常用依赖归纳【vueuse\lodash-es\dayjs\bignumber】

目录

• vueuse
• • 描述
  • 引入
  • 常用函数
  • 详尽文档
• lodash-es
• • 描述
  • 引入
  • 常用函数
  • 详尽文档
• dayjs
• • 描述
  • 引入
  • 常用函数
  • 详尽文档
• bignumber.js
• • 描述
  • 引入
  • 常用函数
  • 详尽函数
  • • [absoluteValue && abs() 取绝对值](#absoluteValue && abs() 取绝对值)
    • [comparedTo 比较大小](#comparedTo 比较大小)
    • [isEqualTo 比较是否相等](#isEqualTo 比较是否相等)
    • [decimalPlaces && dp(num, rm) 保留小数位](#decimalPlaces && dp(num, rm) 保留小数位)
    • [dividedBy && div(num, base) 除](#dividedBy && div(num, base) 除)
    • [dividedToIntegerBy && idiv(num, base) 整除](#dividedToIntegerBy && idiv(num, base) 整除)
    • [exponentiatedBy && pow(n) 指数运算](#exponentiatedBy && pow(n) 指数运算)
    • [integerValue(rm) 取整数](#integerValue(rm) 取整数)
    • [isFinite() 判断 Infinity](#isFinite() 判断 Infinity)
    • [isGreaterThan && gt(num, base) 判断是否更大](#isGreaterThan && gt(num, base) 判断是否更大)
    • [isGreaterThanOrEqualTo && gte(num, base) 判断是否大于等于](#isGreaterThanOrEqualTo && gte(num, base) 判断是否大于等于)
    • [isInteger() 判断是否是整数](#isInteger() 判断是否是整数)
    • [isLessThan && lt(num, base) 判断是否小于](#isLessThan && lt(num, base) 判断是否小于)
    • [isLessThanOrEqualTo && lte(num, base) 判断是否小于等于](#isLessThanOrEqualTo && lte(num, base) 判断是否小于等于)
    • [isNaN() 判断是否是 NaN](#isNaN() 判断是否是 NaN)
    • [isNegative() 判断是否是负数](#isNegative() 判断是否是负数)
    • [isPositive() 判断是否是正数](#isPositive() 判断是否是正数)
    • [isZero 判断是否是 0](#isZero 判断是否是 0)
    • [minus(num, base) 减法运算](#minus(num, base) 减法运算)
    • [modulo && mod(num, base) 取余](#modulo && mod(num, base) 取余)
    • [multipliedBy && times(num, base) 乘法运算](#multipliedBy && times(num, base) 乘法运算)
    • [negated() 取负值](#negated() 取负值)
    • [plus() 加法运算](#plus() 加法运算)
    • [precision() && sd() 保留有效位数](#precision() && sd() 保留有效位数)
    • [shiftedBy(n) 小数点移位](#shiftedBy(n) 小数点移位)
    • [squareRoot() && sqrt() 开根号](#squareRoot() && sqrt() 开根号)
    • [toExponential() 科学计数法](#toExponential() 科学计数法)
    • [toFixed(dp, rm) 保留小数位](#toFixed(dp, rm) 保留小数位)
    • [toFormat(dp, rm, format) 数据格式化](#toFormat(dp, rm, format) 数据格式化)
    • [toFraction(max) 小数转分数](#toFraction(max) 小数转分数)
    • [toJSON() 转换为字符串](#toJSON() 转换为字符串)
    • [toNumber() 转换为数字](#toNumber() 转换为数字)
    • [toPrecision() 保留精度](#toPrecision() 保留精度)
    • [toString() 转换为字符串](#toString() 转换为字符串)
    • [valueOf() 转换为字符串](#valueOf() 转换为字符串)
  • 详尽文档

vueuse

描述

• 基于 Vue Composition API 的实用函数集合，为 Vue 3/2 提供常见状态、事件与交互的封装，支持 Tree Shaking 与 SSR。

引入

• 安装：npm i @vueuse/core
• 使用：

import { useMouse, useDark, useToggle, useLocalStorage } from '@vueuse/core'

const { x, y } = useMouse()
const isDark = useDark()
const toggleDark = useToggle(isDark)
const count = useLocalStorage('count', 0)
// x.value // 示例：120
// y.value // 示例：240
// isDark.value // 示例：false
// toggleDark() // 示例：返回 true，并切换 isDark.value
// count.value // 初始 0，更新后示例：1

常用函数

• useMouse 获取鼠标坐标
• useWindowSize 监听窗口尺寸
• useDark 暗色模式检测
• useToggle 布尔值切换
• useLocalStorage 本地存储同步
• useDebounce 防抖
• useThrottle 节流
• useFetch 轻量请求
• useIntervalFn 定时器
• useEventListener 事件监听

import { useWindowSize, useDebounce, useFetch } from '@vueuse/core'

const { width, height } = useWindowSize()
// width.value // 示例：1920
// height.value // 示例：1080

const debounced = useDebounce(() => doSomething(), 300)
// typeof debounced // 'function'

const { data } = await useFetch('https://api.example.com/items').json()
// Array.isArray(data.value) // 示例：true

详尽文档

• https://vueuse.nodejs.cn/
• https://vueuse.org/

lodash-es

描述

• Lodash 的 ES Modules 版本，提供函数式工具方法，支持按需加载与 Tree Shaking。

引入

• 安装：npm i lodash-es
• 使用：

import { debounce, throttle, cloneDeep, merge, get, set, uniqBy, groupBy, sortBy } from 'lodash-es'

const fn = debounce(() => {}, 300)
// typeof fn // 'function'
const arr = uniqBy([{ id: 1 }, { id: 1 }], 'id')
// arr // [{ id: 1 }]
const obj = merge({ a: 1 }, { b: 2 })
// obj // { a: 1, b: 2 }
const v = get({ a: { b: 3 } }, 'a.b')
// v // 3
const o = set({}, 'a.b', 3)
// o // { a: { b: 3 } }
const grouped = groupBy([{ type: 'a' }, { type: 'b' }], 'type')
// grouped // { a: [{ type: 'a' }], b: [{ type: 'b' }] }
const sorted = sortBy([{ n: 3 }, { n: 1 }, { n: 2 }], 'n')
// sorted // [{ n: 1 }, { n: 2 }, { n: 3 }]

常用函数

• debounce、throttle 控制调用频率
• cloneDeep 深拷贝
• merge 合并对象
• get、set 安全读写
• omit、pick 字段过滤
• uniq、uniqBy 去重
• groupBy 分组
• sortBy 排序

详尽文档

• https://lodash.com/docs/

dayjs

描述

• 轻量日期库，链式 API，兼容 Moment 用法，体积小、扩展丰富。

引入

• 安装：npm i dayjs
• 使用：

import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import utc from 'dayjs/plugin/utc'
import timezone from 'dayjs/plugin/timezone'

dayjs.extend(relativeTime)
dayjs.extend(utc)
dayjs.extend(timezone)

const now = dayjs()
const formatted = now.format('YYYY-MM-DD HH:mm:ss')
// formatted // 示例：'2025-12-15 10:23:45'
const nextWeek = now.add(7, 'day')
const diffDays = nextWeek.diff(now, 'day')
// diffDays // 7
const isBefore = dayjs('2025-01-01').isBefore('2025-12-31')
// isBefore // true
const start = dayjs().startOf('month')
// start.format('YYYY-MM-DD HH:mm:ss') // 示例：'2025-12-01 00:00:00'
const end = dayjs().endOf('month')
// end.format('YYYY-MM-DD HH:mm:ss') // 示例：'2025-12-31 23:59:59'
const inTZ = dayjs().tz('Asia/Shanghai')
// inTZ.format('YYYY-MM-DD HH:mm') // 示例：'2025-12-15 18:23'

常用函数

• format、add、subtract、diff、isBefore、isAfter、isSame、startOf、endOf、unix、toDate

详尽文档

• https://day.js.org/

bignumber.js

描述

• 任意精度的十进制与非十进制运算库，避免 JS 浮点误差，支持链式调用与多种格式化。

引入

• 安装：npm i bignumber.js
• 使用：

import BigNumber from 'bignumber.js'

BigNumber.set({ DECIMAL_PLACES: 20, ROUNDING_MODE: BigNumber.ROUND_HALF_UP })

const a = new BigNumber('0.1')
const b = new BigNumber('0.2')
const sum = a.plus(b)
// sum.toString() // '0.3'
const product = a.times(b)
// product.toString() // '0.02'
const quotient = a.dividedBy(b)
// quotient.toString() // '0.5'
const difference = b.minus(a)
// difference.toString() // '0.1'

常用函数

• plus() 加
• minus(num, base) 减
• times(num, base) 乘
• dividedBy(num, base) 或 div(num, base) 除

详尽函数

absoluteValue && abs() 取绝对值

new BigNumber('-5').absoluteValue() // '5'
new BigNumber('-5').abs() // '5'

comparedTo 比较大小

new BigNumber(2).comparedTo(3) // -1

isEqualTo 比较是否相等

new BigNumber(2).isEqualTo(2) // true

decimalPlaces && dp(num, rm) 保留小数位

new BigNumber('1.2345').decimalPlaces(2) // '1.23'
new BigNumber('1.2345').dp(2) // '1.23'

dividedBy && div(num, base) 除

new BigNumber(5).dividedBy(2) // '2.5'
new BigNumber(5).div(2) // '2.5'

dividedToIntegerBy && idiv(num, base) 整除

new BigNumber(5).dividedToIntegerBy(2) // '2'
new BigNumber(5).idiv(2) // '2'

exponentiatedBy && pow(n) 指数运算

new BigNumber(3).exponentiatedBy(2) // '9'
new BigNumber(3).pow(2) // '9'

integerValue(rm) 取整数

new BigNumber('12.7').integerValue() // '13'

isFinite() 判断 Infinity

new BigNumber('Infinity').isFinite() // false

isGreaterThan && gt(num, base) 判断是否更大

new BigNumber(3).isGreaterThan(2) // true
new BigNumber(3).gt(2) // true

isGreaterThanOrEqualTo && gte(num, base) 判断是否大于等于

new BigNumber(3).isGreaterThanOrEqualTo(3) // true
new BigNumber(3).gte(3) // true

isInteger() 判断是否是整数

new BigNumber('12').isInteger() // true

isLessThan && lt(num, base) 判断是否小于

new BigNumber(2).isLessThan(3) // true
new BigNumber(2).lt(3) // true

isLessThanOrEqualTo && lte(num, base) 判断是否小于等于

new BigNumber(2).isLessThanOrEqualTo(2) // true
new BigNumber(2).lte(2) // true

isNaN() 判断是否是 NaN

new BigNumber('not-a-number').isNaN() // true

isNegative() 判断是否是负数

new BigNumber('-1').isNegative() // true

isPositive() 判断是否是正数

new BigNumber('1').isPositive() // true

isZero 判断是否是 0

new BigNumber('0').isZero() // true

minus(num, base) 减法运算

new BigNumber(5).minus(2) // '3'

modulo && mod(num, base) 取余

new BigNumber(5).modulo(2) // '1'
new BigNumber(5).mod(2) // '1'

multipliedBy && times(num, base) 乘法运算

new BigNumber(2).multipliedBy(3) // '6'
new BigNumber(2).times(3) // '6'

negated() 取负值

new BigNumber(5).negated() // '-5'

plus() 加法运算

new BigNumber(2).plus(3) // '5'

precision() && sd() 保留有效位数

new BigNumber('123.4500').precision() // 5
new BigNumber('123.4500').sd() // 5

shiftedBy(n) 小数点移位

new BigNumber('1.23').shiftedBy(2) // '123'

squareRoot() && sqrt() 开根号

new BigNumber(9).squareRoot() // '3'
new BigNumber(9).sqrt() // '3'

toExponential() 科学计数法

new BigNumber(255.5).toExponential(5) // '2.55500e+2'

toFixed(dp, rm) 保留小数位

new BigNumber(255.5).toFixed(2) // '255.50'

toFormat(dp, rm, format) 数据格式化

new BigNumber('12345.6789').toFormat(2) // '12,345.68'

toFraction(max) 小数转分数

new BigNumber('0.125').toFraction(10) // ['1', '8']

toJSON() 转换为字符串

new BigNumber('1.23').toJSON() // '1.23'

toNumber() 转换为数字

new BigNumber('1.23').toNumber() // 1.23

toPrecision() 保留精度

new BigNumber(255.5).toPrecision(5) // '255.50'

toString() 转换为字符串

new BigNumber('1.23').toString() // '1.23'

valueOf() 转换为字符串

new BigNumber('1.23').valueOf() // '1.23'

详尽文档

• https://mikemcl.github.io/bignumber.js/
• https://github.com/MikeMcl/bignumber.js