vue3中reactive数据被重新赋值后无法双向绑定,使用reactive包裹数组如何正确赋值?
2024-09-08 11:30:41
需求:将接口请求到的列表数据赋值给响应数据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
最新文章
- JavaScript高级程序设计-(4) 引用类型
- 从欧几里得距离、向量、皮尔逊系数到http://guessthecorrelation.com/
- Visual Studio 2013 Update 2 and with Update 2
- 有很多10或100开头的IP在频繁访问ECS的原因
- 合理配置MySQL缓存 提高缓存命中率
- 网站项目后台的目录命名为admin后,网页莫名其妙的变样了
- C++_enum
- MySQL 出现 The table is full 的解决方法
- IOS开发——手动设置屏幕旋转
- ThinkJS框架入门详细教程(二)新手入门项目
- [PHP] Phalcon操作示范
- NPM 报错--fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module
- vue-amap 实例获取与自动缩放
- P2885 [USACO07NOV]电话线Telephone Wire
- openresty 使用cuid 类库生成短链接id
- Math 类的使用(一小部分)
- input输入框用el对数字格式化
- 关于UDP很好的书籍和文章(整理、持续更新)
- Python+Flask+MysqL的web建设技术过程
- 深度学习(六十二)SqueezeNet网络设计思想笔记