vue3 中关于对象和数组直接整个赋值页面不生效

最新推荐文章于 2024-07-07 15:16:03 发布

艾敲代码的MT

最新推荐文章于 2024-07-07 15:16:03 发布

阅读量1.1w

点赞数 14

文章标签： typescript javascript 前端

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_26705343/article/details/124846016

版权

在 Vue3 中，使用 `reactive` 函数声明的对象和数组如果直接整体赋值，会导致响应式失效。原因是响应式对象通过 `proxy` 实现，直接赋值会丢失响应性。解决办法是避免直接覆盖，而是通过 `push` 或者遍历赋值来保持数组的响应性。本文探讨如何在不失去响应性的情况下，将整个数组拼接到响应式数据上。

摘要由CSDN通过智能技术生成

一、使用reactive函数声明数组如何正确赋值
　　需求：将接口请求到的列表数据赋值给响应数据 array

const arr = reactive([]);
const load = () => {
   
  const res = [2,

最低0.47元/天解锁文章

艾敲代码的MT

关注

14
点赞
踩
26

收藏

觉得还不错? 一键收藏
3
评论
vue3 中关于对象和数组直接整个赋值页面不生效

一、使用reactive函数声明数组如何正确赋值　　需求：将接口请求到的列表数据赋值给响应数据 arrayconst arr = reactive([]);const load = () => { const res = [2, 3, 4, 5]; //假设请求接口返回的数据 // 方法1 失败，直接赋值丢失了响应性 // arr = res; // 方法2 这样也是失败 // arr.concat(res); // 方法3 可以，但是很麻烦 res.forEach(
复制链接

扫一扫

评论 3

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。