对于vue3中的响应式数据使得lodash无法正确被使用

最新推荐文章于 2025-04-23 14:57:50 发布

阿拉斯加的头头儿

最新推荐文章于 2025-04-23 14:57:50 发布

阅读量573

点赞数

分类专栏： Vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_44196534/article/details/131220401

版权

Vue 专栏收录该内容

8 篇文章

订阅专栏

在Vue3中，由于采用新的响应式系统，使用Lodash函数可能无法正确监听响应式数据变化。为解决此问题，文章提出了使用`toRaw`方法配合Lodash操作响应式数据的示例代码，展示了如何在保持数据响应性的同时进行复杂操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在 Vue 3 中，由于其使用了新的响应式系统，与 Vue 2 不同，您需要使用 ref 或 reactive 函数来创建响应式数据。

如果使用 Lodash 对响应式数据进行操作时，通常会出现无法正确监听响应式数据变化的问题。这是因为 Lodash 的函数并不是针对 Vue 3 新的响应式系统设计的。因此，可以使用vue3中的toRaw

在这里插入图片描述
记录自己用到的代码块

const undoneChangePrice = (filterArr, originArr, compareKey, hasKeyValue) => {
  const commonArr = lodash.intersectionWith(originArr, filterArr, (a, b) => a[compareKey] === b);
  const finalValue = lodash.filter(commonArr, hasKeyValue);
  return finalValue || [];
};

  let undoneArr = undoneChangePrice(
    toRaw(multipleSelection.value),
    toRaw(pager.list),
    "stock_code",
    {
      is_change_price: 1
    }
  );