lodash-es 使用lodash-es 是 Lodash 的 ES Module 版本，非常适合现代前端工程（Vi

lodash-es 是 Lodash 的 ES Module 版本，非常适合 现代前端工程（Vite / Rollup / Webpack / Vue / React） ，支持 Tree Shaking，比传统 lodash 更轻量。

下面给你一份 实用、工程化导向的 lodash-es 使用指南。

一、lodash-es 是什么？和 lodash 有什么区别？

对比项	lodash	lodash-es
模块规范	CommonJS	ES Module
Tree Shaking	❌ 不支持	✅ 支持
打包体积	较大	更小
适用场景	Node / 老项目	现代前端

👉 前端项目推荐用 lodash-es

二、安装

npm install lodash-es

TypeScript 项目无需额外安装 types（已内置）

三、推荐的引入方式（非常重要）

✅ 正确（支持 Tree Shaking，强烈推荐）

import { debounce, cloneDeep } from 'lodash-es'

或 按需单独引入（体积最小）

import debounce from 'lodash-es/debounce'
import uniqBy from 'lodash-es/uniqBy'

四、Vue 2 常见场景实战

1️⃣ 输入框防抖（Vue 2）

<template>
  <input @input="onInput" />
</template>

<script>
import debounce from 'lodash-es/debounce'

export default {
  data() {
    return {
      searchFn: null
    }
  },
  created() {
    this.searchFn = debounce(this.search, 300)
  },
  beforeDestroy() {
    this.searchFn.cancel()
  },
  methods: {
    search(val) {
      console.log('搜索:', val)
    },
    onInput(e) {
      this.searchFn(e.target.value)
    }
  }
}
</script>

✅ Vue 2 中 必须在 beforeDestroy 里 cancel

2️⃣ 按钮节流（防重复提交）

import throttle from 'lodash-es/throttle'

export default {
  created() {
    this.submit = throttle(this.submit, 1000)
  },
  methods: {
    submit() {
      console.log('提交中...')
    }
  }
}

3️⃣ 深拷贝（表单编辑）

import cloneDeep from 'lodash-es/cloneDeep'

export default {
  data() {
    return {
      origin: {},
      form: {}
    }
  },
  created() {
    this.form = cloneDeep(this.origin)
  }
}

4️⃣ 判断表单是否修改（isEqual）

import isEqual from 'lodash-es/isEqual'

computed: {
  isChanged() {
    return !isEqual(this.origin, this.form)
  }
}

5️⃣ 安全读取接口数据（get）

import get from 'lodash-es/get'

const name = get(res, 'data.user.profile.name', '')

6️⃣ 数组去重（uniqBy）

import uniqBy from 'lodash-es/uniqBy'

this.list = uniqBy(this.list, 'id')

五、Vue 2 项目强烈推荐的封装方式

📁 `src/utils/lodash.js`

export { default as debounce } from 'lodash-es/debounce'
export { default as throttle } from 'lodash-es/throttle'
export { default as cloneDeep } from 'lodash-es/cloneDeep'
export { default as isEqual } from 'lodash-es/isEqual'
export { default as get } from 'lodash-es/get'
export { default as uniqBy } from 'lodash-es/uniqBy'
export { default as pick } from 'lodash-es/pick'
export { default as omit } from 'lodash-es/omit'

使用：

import { debounce, cloneDeep } from '@/utils/lodash'

六、Vue 2 + lodash-es 常见坑（重点）

❗ 1. 编译报错（最常见）

Unexpected token export

解决方案（二选一）：

✅ 方案 A：Babel 转译 lodash-es（推荐）

// vue.config.js
module.exports = {
  transpileDependencies: ['lodash-es']
}

✅ 方案 B：直接换 lodash（最稳）

npm uninstall lodash-es
npm install lodash

❗ 2. 不能挂到 Vue 原型

// ❌ 不要
Vue.prototype.$_ = _

👉 会破坏 Tree Shaking，也容易出问题

七、Vue 2 项目到底该不该用 lodash-es？

✔ 适合用 lodash-es 的情况

项目会升级 Vue 3
Webpack ≥ 4
用得比较多（debounce / cloneDeep / isEqual）

❌ 不建议用的情况

老项目，不再维护
Webpack 3 / IE
只用 1~2 个方法

👉 很多 Vue 2 项目：直接用 lodash 反而更省心

八、我的结论（给你一句实话）

Vue 2 项目：
能跑 lodash-es 就用，跑不稳就别折腾，直接 lodash。

lodash-es 使用