reactive重新赋值清空数据的坑点

最新推荐文章于 2024-05-29 16:06:34 发布
最新推荐文章于 2024-05-29 16:06:34 发布
阅读量554 收藏 5
点赞数 10
文章标签： java 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58757118/article/details/134603470
版权

let tableData = reactive<any[]>([])响应式数据

如果直接tableData = reactive<any[]>([])，不可行

我造成的后果是：表单清空后马上又赋值

tableData.splice(0, data.records.length, ...data.records)

但表单数据不会回显上去，仍全为空。

reactive用于创建响应式对象，直接重新赋值会破坏之前对tableData的引用

解决：

tableData.length = 0;

tableData.splice(0, tableData.length);

二选一，这样都不会破坏对tableData的引用

weixin_58757118
关注
  • 10
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue数据双向绑定的注意点
08-30
Vue 数据双向绑定的注意点 在 Vue 框架中，数据双向绑定是非常重要的概念，它允许开发者在视图层和数据模型之间建立实时的同步关系。但是，在实际开发过程中，开发者容易遇到一些问题，例如动态生成的对象进行双向...
reactive-dom:React式用户界面库
05-18
React式 响应式DOM是基于可观察的库，用于构建高性能用户界面。 它使用可观察对象来初始设置各种数据源和DOM元素之间的管道。 每当数据更改时，所有相关的DOM元素都会自动更新。链接虚拟DOM与React式DOM 特征虚拟DOM...
vue3清空reactive的方式
m0_69439101的博客
08-02 1272
这将清空 formState对象。但是请注意，这种方法只能清空对象上的属性，不能删除对象本身。
vue3中reactive踩坑记录
青莳的博客
12-22 487
vue3中reactive踩坑记录
Reactive 踩坑
最新发布
qq_45941801的博客
05-29 344
本身已改变了 ，就相当于人家不是男的了，咋帮你干其他活。响应式数据本身是个函数，（不然咋帮你动态变化页面。关于响应式数据底层的实现，我不大清楚，爱莫能助。上面例子里响应式数据已被重新赋值。
【vue3】记一次reactive踩坑
m0_64194186的博客
01-04 418
但赋值reactive定义的对象会出问题
vue3中使用reactive定义的变量响应式丢失问题（重新分配一个新对象会丢失响应性 大坑！！！）
码农键盘上的梦
11-15 4471
在Vue 3中，可以使用reactive函数将普通JavaScript对象转换为响应式对象，这样当对象的属性发生变化时，就会自动更新相应的UI。但使用reactive时，如果不当使用，可能导致响应性失效，带来一些困扰。这可能让开发者在愉快编码的同时，突然发现某些操作失去了响应性，不明所以。因此，建议在不了解reactive失去响应的情况下慎用，而更推荐使用ref。首先看一下reactive和refreactive// 定义一个响应式变量name:"",age:""});// 请求接口。
vue3 清空/重置reactive
xuelang532777032的博客
08-21 3394
首先你不能const，因为定义常数，在reactive里你是不能重新赋值的。 变量类型申明不能少！，三个支付方式切换的同时，下面的input的字段也跟着切换、而且最主要的是。form是const定义的常量，本身是响应的，所以.age会响应到。1、适用场景：表单切换验证如下图。然后就是感兴趣的小伙伴,博主微信公众号：“这个方法我想大家会关系，新增age这个属性，会不会，就不。转载请附上本文链接！：“获取到form的所有响应属性，删除。
vue3用reactive定义的数据想要置空却置空不了的解决办法
weixin_46392674的博客
02-24 3050
el-button type="primary" @click="toSearch">查询返回//清空表单数据：如果定义的是reactive响应式的变量 需要打点出属性 单独清空 不能使用 resetFields();//清空表单数据：如果定义的是ref响应式的变量 使用 resetFields();//如果是搜索完之后必须再次调用查询的接口方法。清空时定义一个返回的按钮。
meibiu.zip_MMSE reactive_优化误差最小_数据误差分析_误差优化
07-15
在IT领域，尤其是在数据分析和信号处理中，"meibiu.zip_MMSE reactive_优化误差最小_数据误差分析_误差优化"这一标题所涵盖的知识点主要包括最小均方误差（Minimum Mean Square Error, MMSE）理论、反应式（reactive...
reactive-streams-1.0.3.jar
01-10
reactive-streams-1.0.3.jar
wind-reactive:响应数据更改的模板
05-10
React性 响应数据更改的模板。 执照 麻省理工学院
vue3的reactive赋值问题
weixin_62131865的博客
01-30 972
我的做法是：把props.data结构赋值给modalData变量，结果没有生效，我用vue插件查看，插件显示modalData变量是一个空对象。查了下资料，发现直接给reactive声明的变量本身赋值是没有效果的。在查阅资源时，发现reavtive声明的数组变量，赋值时也同样有问题。vue3中直接对reactive声明的变量本身进行赋值是无效的。我的逻辑：监听visible变量，如果弹窗显示，则将数据回显。写完之后发现无效，便改成了单个数据置空，此时生效了。
清空数组的几个方式
CRMEB小程序商城的博客
12-08 1万+
前言 前两天在工作当中遇到一个问题,在vue3中使用reactive生成的响应式数组如何清空,当然我一般清空都是这么写: let array = [1,2,3]; array = []; 复制代码 不过这么用在reactive代理的方式中还是有点问题，比如这样: let array = reactive([1,2,3]); watch(()=>[...array],()=>{ console.log(array); },) array = r.
【笔记】vue3.x 清空reactive对象
热门推荐
咫尺天涯的专栏
08-19 1万+
有一个reactive对象，在清空这个对象时，直接给其赋{}不起作用。 为了解决这个问题，采取了一点粗糙的方法，代码如下： <template> <el-button @click="clear">清空</el-button> </template> setup() { const form = reactive({ name: 'Name', age: 18 }) const clear = () => { .
【vue3+ts】清空/重置reactive
weixin_46580991的博客
06-26 4809
1.reactive定义对象 const test = reactive({}) Object.assign(test, {}) 2.数组清空 const test = reactive([]) test.length = 0
Vue3 重置&覆盖 reactive 数组数据的方法
从今年开始写写博客~~
03-06 1439
核心要点： 通过splice删除原数组内的所有数据，并添加新的数据进去。 潜在影响：大数据量下，splice重置数组和 ref 的.value重新赋值重置数组，哪个耗时短还需自行测试。 通过 `splice` 传入0 和 Infinity 来删除原数组从头到尾的内容，然后`...[]`将新数据丢进响应式数组里。
VUE的setup、ref、reactive和代理数据的使用详解
一键难忘的博客
03-15 666
先来实现一个简单的点击按钮，数字增加的案例：需求：页面打开后可以直接看到一个数据，点击按钮后，该数据可以发生变化。
vue3 reactive的坑
a9874561328的博客
04-02 4031
最近使用vue3的过程中发现reactive有一些问题 清空reactive定义的数组时必须将length设为0，直接赋值一个空数组是没有作用的，同理对象直接赋值一个空对象也没有作用，只能遍历对象一项一项删，这里说的没有作用是不能响应式的更新页面，如果打印一下是能看到确实被删除了，但是页面没有变化 清空数组 // 错误示例 <template> <div>{{ arr }}</div> <button @click="click">点击&lt
vue3 reactive 数组重新赋值
06-02
如果要对数组进行重新赋值，可以直接使用`=`操作符对数组进行覆盖赋值，例如： ``` import { reactive } from 'vue'; const state = reactive({ list: ['apple', 'banana', 'orange'] }); state.list = ['grape'...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值