Vue 3 中配置 Lodash 应按需引入、避免全局挂载，推荐使用 lodash-es + @types/lodash-es，配合 unref/toRaw 处理响应式数据，节流防抖需手动清理。
Vue 3 项目中配置 Lodash，核心是“装得对、引得准、用得稳”。不建议全局挂载，优先按需引入或使用 ES 模块化方式，兼顾类型支持与打包体积。
安装依赖（推荐 pnpm/yarn）
在项目根目录执行：
-
基础库：
pnpm add lodash或yarn add lodash -
TypeScript 类型（必须）：
pnpm add -D @types/lodash -
更优替代（可选）：如追求极致体积，可用
lodash-es替代lodash，它原生支持 Tree-shaking：pnpm add lodash-es，并搭配@types/lodash-es
引入方式选型（关键！）
避免 import * as _ from 'lodash' 全量引入——体积大、类型推导弱、IDE 提示差。推荐以下三种之一：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
-
按需导入（最常用）：
import { debounce, throttle, cloneDeep, uniqBy } from 'lodash' -
子路径导入（兼容性好）：
import debounce from 'lodash/debounce'（注意：需确认 tsconfig 中"moduleResolution": "node"且"esModuleInterop": true） -
ES 模块版（推荐 TS 项目）：
import { debounce } from 'lodash-es'—— 零配置支持 Tree-shaking，类型完整，构建体积最小
响应式数据处理注意事项
Vue 3 的响应式对象（ref/reactive）本质是 Proxy 包裹的包装器，直接传给 Lodash 函数可能返回非响应式结果。正确做法：
- 操作前先解包：
cloneDeep(unref(myRef))或cloneDeep(toRaw(myReactive)) - 深拷贝后若需响应式，再用
ref()或reactive()包裹：const copied = reactive(cloneDeep(toRaw(original))) - 节流/防抖函数应定义在
onMounted内，并在onUnmounted中调用.cancel()清理，防止内存泄漏
常见函数快速上手示例
写在 <script setup></script> 中即可直接用：
-
去重：
uniqBy(userList, 'id')—— 按字段去重数组对象 -
深拷贝：
cloneDeep(formState)—— 安全备份表单原始值 -
防抖搜索：
const search = debounce((val) => api.search(val), 300) -
分块展示：
chunk(itemList, 10)—— 每页 10 条，生成二维分页数组
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
