vue3踩坑-给数组赋值丢失响应

最新推荐文章于 2024-09-25 10:52:55 发布

c508875

最新推荐文章于 2024-09-25 10:52:55 发布

阅读量822

点赞数 7

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/c508875/article/details/135260148

版权

公司的项目使用了vue3，新增都是好好的，编辑的时候列表已选项渲染不出来。

检查了好几遍代码数组声明const dataList= ref([]}是对的，重新赋值dataList.value=newList也是对的，手动塞数据能正常显示，但是后端回传的数据就是渲染不出来······

后来发现是在取后端数据的时候声明了一个let dataList=res导致的······

记录一下这次踩坑

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

c508875

关注关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

小小经验：Vue中计算属性computed没有被触发的排查

qq_42264597的博客

02-28

7588

小小经验：Vue中计算属性computed没有被触发的排查 vue中的计算属性可以绑定动态变量，当页面有变化时，计算属性就会自动更新 data中定义了相互独立并且不影响的变量问题：computed中定义的一个动态变量在相关的属性发生变化时，并没有发生相对应地发生变化比如，我点击全选或者商品的单选时，商品的总件数或者总价都没有发生变化计算属性的代码： computed: { totalNum: function () { let total = 0; console.

vue-seamless-scroll 从入坑到放弃

最新发布

2401_86337335的博客

09-25

1575

vue 提供了响应性的功能，用起来非常方便，只是 compositionAPI 把响应性提取出来之后，就出现了各种各样的小问题，在这里汇总一下。

vue3 遇到 reactive响应式失效问题记录

柑橘乌云_

02-15

4486

情况简述：初始化了一个reactive的空数组，之后调用接口，将接口返回的数据赋值给这个reactive，此时发现页面数据并没有更新。在vue3中不管是对象还是数组都不能直接将整个数据进行赋值，这样会造成reactive定义的响应式失效。直接把一个新的数组赋值给dataList,导致reactive声明的响应式对象由dataList代理。被新的数组所替代,因为在操作代理对象的时候需要有代理对象作为前提,所以失去了响应式。就像对象的地址被替换，就不是原来的那个对象了。

讲讲vue3下会造成响应式丢失的情况

发果叁

11-07

8159

我们一开始接触vue3的时候，会对这个问题十分的不解，只是知道有这个问题而不知其根，今天就来讲讲这个问题。obj = test;通过reactive()包含的对象是进行了内部的proxy代理，因此具有响应式。但是像test这个对象，它是没有进行数据劫持的，而对象赋值的时候实际上是引用地址赋值。那么obj这个对象变成了一个没有数据劫持的引用地址，那么它也就失去了响应式。但是obj1重新赋值时会保留自身的响应式。其实很简单，跟上图的代码是有关的。细心的人会发现，在set函数里面有这么一段代码。

给ref对象赋值失去响应，解决办法

puhuihui的博客

02-13

1509

给 ref 对象赋值失去响应的解决办法

vue3给数组赋值丢失响应式的解决方法

小多的博客

07-07

9603

由于vue3使用proxy，对于对象和数组都不能直接整个赋值。只有push或者根据索引遍历赋值才可以保留reactive数组的响应性或者或者例子效果图：

Vue3 大量赋值导致reactive响应丢失问题

google20的博客

03-21

589

略

自用JAVA基础面试八股文（简单易记不踩坑）

weixin_53805188的博客

03-13

1025

java基础易懂的实时更新知识点，自用！！！！

在vue中存在数组和对象重新赋值时，会丢失响应式

qq_44173499的博客

02-26

1993

1.在vue中存在数组和对象重新赋值时，会丢失响应式》。解决方法： let current = { ...this.choiceList[index], isTableEditer: true} this.$set(this.choiceList,index,current)

【项目复盘-Vue2】element实现el-tree和el-table联动，el-table多页全选功能，el-tree全部节点禁选

Weiqian_的博客

04-13

3863

element实现el-tree和el-table联动，el-table多页全选功能，el-tree全部节点禁选

vue3之reactive直接赋值数组对象页面不响应式更新的踩坑记录

Study123wf的博客

05-19

897

https://blog.csdn.net/weixin_50587417/article/details/127646237?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2defaultCTRLISTRate-1-127646237-blog-125562758.235%5Ev36%5Epc_relevant_yljh&depth_1-utm_source=distribute.pc_relevant

Vue3使用defineprops丢失响应式的解决方法

m0_74545388的博客

06-13

681

今天写代码的时候,父组件传给子组件的数据,然后修改数据去调取后端的接口,结果数据一直对不上,然后发现终端中打印的。但是在别的地方写需要props.id来使用id传来的值,有些人觉得这样不太优雅,于是这样写。这就是问题的所在,这样会使id丢失响应式。比如我们平时写代码父传子是这样的。如果非要使用结构式,可以这样玩。点击进入发现尤大大发的文章。

vue数组和对象数据改变后页面不能响应

Serena_tz的博客

06-09

5613

由于 JavaScript 的限制，Vue不能检测数组和对象的变化，在我们改变数组和对象的数据时，页面没有办法响应式改变。因此，我们要采用一些特殊的方法来让页面响应数组和对象的改变。数组 Vue 不能检测以下数组的变动，让页面响应式改变：当你利用索引直接设置一个数组项时，例如： vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如： vm.items.length = newLength 举个例子： var vm = new Vue({ data:

vue3中reactive响应式在接口数据赋值后丢失响应式

qq_41026858的博客

01-14

2164

reactive响应式数据赋值丢失响应式问题解决方式：把let cartList=reactive<Array>([])改成let cartList=ref<Array>([])，赋值时变成cartList.value=res.data <script setup lang="ts"> import { ref, reactive, onMounted } from 'vue' import { useRouter, useRoute } from 'vue-rout

vue 计算属性未重新计算 / computed 未触发 / computed 原理&源码分析

wrc的专栏

11-30

1万+

vue computed源码分析

vue3用reactive定义的数据想要置空却置空不了的解决办法

weixin_46392674的博客

02-24

3408

el-button type="primary" @click="toSearch">查询返回//清空表单数据：如果定义的是reactive响应式的变量需要打点出属性单独清空不能使用 resetFields();//清空表单数据：如果定义的是ref响应式的变量使用 resetFields();//如果是搜索完之后必须再次调用查询的接口方法。清空时定义一个返回的按钮。

给reactive对象重新赋值失去响应式的处理方案-vue3

weixin_67160091的博客

02-25

1684

给reactive对象重新赋值失去响应式的处理方案

vue数组赋值为空，检测不到变量的变化

Y丶小琪

04-26

3040

vue逻辑处理中，直接给数组变量赋值为空例如 this.arr=[]，后面操作将不会在监听此变量的变化可以使用this.arr.splice(0)给清空数组