需求:将接口请求到的列表数据赋值给响应数据arr

const arr = reactive([]);

const load = () => {
const res = [2, 3, 4, 5]; //假设请求接口返回的数据
// 方法1 失败,直接赋值丢失了响应性
// arr = res;
// 方法2 这样也是失败
// arr.concat(res);
// 方法3 可以,但是很麻烦
res.forEach(e => {
arr.push(e);
});
};

vue3使用proxy,对于对象和数组都不能直接整个赋值。
使用方法1能理解,直接赋值给用reactive包裹的对象也不能这么做。

这是因为reactive数据被重新赋值后,原来数据的代理函数和最新的代理函数不是同一个,无法被触发

推荐第一种!

引自:

https://segmentfault.com/q/1010000038701322;

https://gudujian.blog.csdn.net/article/details/121961031

vue3中reactive数据被重新赋值后无法双向绑定,使用reactive包裹数组如何正确赋值?的更多相关文章

  1. vue 中contenteditable="true"添加可编辑属性后v-model双向绑定失效的解决办法

    在项目中会遇到需要编辑单元格的双向绑定问题,v-model双向绑定会在添加contenteditable="true"属性后失效解决方法如下,亲测好用(v-html和@blur实现 ...

  2. 某些时候 v-if 会导致 v-modal 内部数据获取不到 也watch不到,这个时候用v-show即可,另外提一下数组要整体赋值才有双向绑定

    某些时候 v-if 会导致 v-modal 内部数据获取不到 也watch不到,这个时候用v-show即可,另外提一下数组要整体赋值才有双向绑定

  3. asp.net中UpdatePanel数据加载成功后回调

    //添加UpdatePanel加载成功后执行的js方法 Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(onPageLoade ...

  4. C# 过滤字典中的数据 并将过滤后的数据转成新的字典对象

    Dictionary<string, object> dic = new Dictionary<string, object>(); dic.Add("); dic. ...

  5. 关于vue.js中v-model与表单控件的双向绑定。

    单选框:<input type="checkbox" id="checkbox" v-model="checked"><l ...

  6. 如何在原生微信小程序中实现数据双向绑定

    官网:https://qiu8310.github.io/minapp/ 作者:Mora 在原生小程序开发中,数据流是单向的,无法双向绑定,但是要实现双向绑定的功能还是蛮简单的! 下文要讲的是小程序框 ...

  7. Vue6——v-model实现数据双向绑定

    博客地址 :https://www.cnblogs.com/sandraryan/ v-model 用于input标签,用于实现双向绑定,及时把数据的变化渲染在页面 双向绑定及原理 举个双向绑定的简单 ...

  8. 关于Vue中,checkBox等组件在赋值后,点击切换页面未及时更新问题

    我们经常碰到这样的问题,在v-for循环中,给某些组件(此处以checkBox为例)赋值后,组件并不能正常切换, 这是因为数据层太多,render函数没有自动更新,需手动强制刷新. 解决方法:在切换c ...

  9. 解决Vue中文本输入框v-model双向绑定后数据不显示的问题

    前言 项目中遇到一个问题就是在Vue中双向绑定对象属性时,手动赋值属性后输入框的数据不实时更新的问题. <FormItem label="地址" prop="eve ...

  10. vue3中使用axios如何去请求数据

    在vue2中一般放在created中,但是在vue3中取消了created生命周期,请求方式有两种 直接在setup中去获取数据 setup(props) { const data = reactiv ...

随机推荐

  1. 聊聊web漏洞挖掘第一期

    之前写2022年度总结的时候,有提到要给大家分享漏洞挖掘技巧.这里简单分享一些思路,更多的内容需要大家举一反三. 文章准备昨晚写的,昨天晚上出去唱歌,回来太晚了,耽搁了.昨天是我工作的last day ...

  2. C#/VB.NET 在Excel中添加水印

    在工作中,为了防止文件被随意复制和传播,通常我们会选择在文档中添加水印来对文件进行有效保护.文字水印是比较常见的一种保护手段,它可以有效防止文件被任意复制和随意打印传播.不过,Excel默认并没有水印 ...

  3. Ubuntu 22.04 运行 Appimage 文件

    解决方法 sudo apt-get update sudo apt install fuse libfuse2 chmod a+x *.appimage 参考资料 https://bynss.com/ ...

  4. Flutter新版本2.X系列--01创建项目

    1.新建项目,打开Android studio,点击红圈部分 2.选择第一个 3.设置你的项目名称,flutter sdk位置,以及项目存储路径 4.设置包名,这个要唯一 5.好啦 ~ 作为一名前端开 ...

  5. angular打包出现JavaScript堆内存不足、启动也会内存溢出解决办法\increase-memory-limit' 不是内部或外部命令,

    ## 打包出现JavaScript堆内存不足 最近打包遇到这种报错 Ineffective mark-compacts near heap limit Allocation failed - Java ...

  6. 基于AS2协议的EDI 系统

    一款由JAVA语言开发的基于AS2 协议的EDI 轻量级系统 优点如下: 1.价格便宜.目前市场上一条gateway线路动辄数万,甚至数万/年. 2.功能强大.功能可以与主流EDI 软件媲美. 3.可 ...

  7. ATM购物车大作业

    项目开发流程 1.需求分析:品经理与架构师,根据客户的需求,理出一套比较容易编写的流程 2.架构设计:架构师根据具体的业务需求选择 具体的开发编程语言与项目框架,所需要的数据库(主库,从库).与开发目 ...

  8. 简单了解C语言如何构建多文件项目

    简单理解C语言如何构建工程 首先我们最好有一个好用的编辑器,vscode也好,visual studio也罢,dev也行,这里我们使用的是code::block: 一.了解C语言工程的构建原理 ​ 首 ...

  9. 编写antd的Cascader 级联选择组件市级地区数据

    下面是该组件的使用数据的格式 options: [ { value: 'zhejiang', label: 'Zhejiang', children: [ { value: 'hangzhou', l ...

  10. 微信小程序使用vant组件样式不生效的问题

    下面提供几个解决方案 方案一: 官方文档有说明,将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖, ...