VUE3响应式的坑

最新推荐文章于 2023-11-15 14:28:53 发布
最新推荐文章于 2023-11-15 14:28:53 发布
阅读量107 收藏
点赞数
文章标签： javascript vue.js 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_60864748/article/details/131581612
版权

reactive创建的响应式数据要想避免数据丢失响应式就不能直接给对象/数组赋值，像什么数组的concat也会丢失响应式，目前我所知的解决办法有

1.直接在reactive里面加上一层 例如const obj=reactive({val:{}}) 

2.直接操作对象 使用Object.assign(响应式对象, 传入的对象)

ps:大佬可以说说别的办法

不如吃茶去321
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue数组元素不是响应式解决方法
wsx981049288的博客
07-28 511
this.$set，数组数据变成响应式
vue中数组合并遇到的问题
weixin_43167662的博客
09-08 798
vue
VUE3-工作笔记-06
m0_59214979的博客
12-05 1923
本节：总结11月份学到的知识
vue3知识点小计
weixin_53917005的博客
10-14 963
vue3基础知识点整理
vue 中concat什么意思
weixin_42576186的博客
02-16 1855
在 Vue 中，concat 是 JavaScript 中的一个数组方法，用于将一个或多个数组连接起来，返回一个新的数组，而不会修改原始数组。 在 Vue 中，concat 方法可以用于连接两个数组，例如： vararray1 = [1, 2, 3]; var array2 = [4, 5, 6]; var array3 = array1.concat(array2); 在上面的例子中，conc...
3-Vue-组件的基本用法
qq_56023114的博客
08-03 100
局部组件 通过一个对象来描述这个组件 const counter = { //模板 template: ` <div>counter</div> ` } 创建一个实例来注册这个组件 new Vue({ //el：挂载点 el: "#app", //组件,用来注册一个组件counter，components组件的意思 components:{counter} }) 在上面注册了一个counter组件,且只能在挂载点为app的容器使用这个组件 全局注册 &
02.Vue3 基础语法：常用语法、列表渲染、事件绑定和表单双向绑定
John是橘红的博客
05-05 1069
Vue3 基础语法 1. Vue 中应用和组件的基础概念 createApp createApp 表示创建一个 Vue 应用，存储在 app 变量中。 传入的参数表示，这个应用最外层的组件，应该如何展示。 const app = Vue.createApp({ data() { return { message: "hello world" } }, template: "<div>{{ message }}<
Java毕业设计--SpringBoot和Vue的响应式企业员工绩效考评系统.zip
09-11
数据库：MySql（建议用 5.7 版本，8.0 有时候会有坑） 数据库工具：navicat 部署环境：Tomcat（建议用 7.x 或者 8.x 版本）， maven 2. 部署 如果部署有疑问的话，可以找我咨询 后台路径地址：localhost:8080/...
VUE3中对数组和多重数组的合并，交集，并集
H_jrqn的博客
05-24 2453
VUE3中对数组和多重数组的合并，交集，并集
VUE基础知识三：数组常用的操作函数
IT-CRUD
06-29 1242
数组常用操作函数push、pop、shift、unshift、reverse、splice、slice、concat等使用方法
为什么数据变了 但是视图并没有更新?
weixin_59023662的博客
12-07 489
在vue中 模型变视图变 是因为vue中有数据劫持与发布者订阅者模式共同影响的 但是 数据劫持是通过Object.deineProperty()来进行劫持的 但是Object.deineProperty() 只会监听初始化的时候data里面的数据 如果初始化之后新添加的属性是不会被劫持到的 所以模型变了数据劫持就劫持不上 视图也就不更新 解决方式 使用$set来完成 this.$set(你要操作的数据,你要新增的key,你要新增的val) ...
vue3数据更新了，但是视图没有更新、下拉选择框数据更新了，视图还是没有数据（记录初次使用vue3的时候遇到的一些问题，以及解决办法）
都已经是第二年的立春、又何必执着于、当年的盛​夏呢？
10-23 4817
一个联动的下拉选择框，一个选择框的数据是前端定义的，第二下拉选择是通过第一个选择框的value 值去请求后端接口得到的。
vue3中使用reactive定义的变量响应式丢失问题（重新分配一个新对象会丢失响应性 大坑！！！）
最新发布
码农键盘上的梦
11-15 4700
在Vue 3中，可以使用reactive函数将普通JavaScript对象转换为响应式对象，这样当对象的属性发生变化时，就会自动更新相应的UI。但使用reactive时，如果不当使用，可能导致响应性失效，带来一些困扰。这可能让开发者在愉快编码的同时，突然发现某些操作失去了响应性，不明所以。因此，建议在不了解reactive失去响应的情况下慎用，而更推荐使用ref。首先看一下reactive和refreactive// 定义一个响应式变量name:"",age:""});// 请求接口。
Vue中关于Object.assign(obj, this.currentRow )复制对象到底是不是真正的复制，Object.assign()复制仍指向原对象的问题
Spy003的博客
07-14 259
当然还有情况，对象的属性是引用类型：如果 this.currentRow 对象的某些属性是引用类型（如数组或对象），那么在使用 Object.assign() 复制属性时，复制的是引用而不是值。如果您想确保 Object.assign() 不会影响 this.currentRow 对象的属性，可以使用深拷贝来复制对象属性，确保生成一个新的对象。这将创建一个新的对象 obj，其属性与 this.currentRow 相同，但是它们是完全独立的对象，修改 obj 不会影响 this.currentRow。
vue的数组页面响应
weixin_43760265的博客
04-28 397
vue的数组页面响应 vue的数组和普通的JavaScript数组没有什么太大的区别，但是由于 JavaScript 的限制，Vue 不能检测数组和对象的变化，所以导致很多数组变化是没办法做到实时更新的，这些方法的了解可以帮助我们更好的使用vue，同时也可以巩固一下JavaScript的知识 数组响应式改变 1、使用push()方法可以响应式更新,可以在数组最后面添加一个新的元素 <div ...
vue3给数组赋值丢失响应式的解决方法
小多的博客
07-07 8967
由于vue3使用proxy，对于对象和数组都不能直接整个赋值。只有push或者根据索引遍历赋值才可以保留reactive数组的响应性 或者 或者 例子 效果图：
Vue3学习之旅--爱上Vue3--Vue3基础语法(二)--模板语法--条件渲染--列表渲染--为什么Vue的v-for需要绑定key属性
听雨少年的博客
07-20 466
Vue3学习之旅–爱上Vue3–Vue3基础语法(二)–模板语法 续上文： vue3学习之旅–邂逅vue3-了解认识Vue3 vue3学习之旅–邂逅vue3-了解认识Vue3(二) Vue3学习之旅–爱上Vue3–Vue3基础语法(一)–以及vscode基本使用和快速生成代码片段 条件渲染 在某些情况下，我们需要根据当前的条件决定某些元素或组件是否渲染，这个时候我们就需要进行条件判断了。 Vue提供了下面的指令来进行条件判断： v-if v-else v-else-if v-show 下面我们开始逐个的
Vue3新特性全面剖析
每天都要努力学习哦~~
12-20 1550
一款框架诞生需要的阶段 查看版本:npm view vue versions 开发 alpha版：内部测试版 α beta版：公开测试版 β rc版：Release Candidate（候选版本） stable版：稳定版 npm i vue@lasted:下载的是vue2 vue2 vuex3 vue-router3 element-ui 2 npm i vue@next：下载的是vue3 vue3 vuex4 vue-router4 element-plus 1 npm i.
vue&js：concat不生效
好幸运
07-20 2811
一、看别人的都写的好好的能够赋值，为什么我的数组长度是0呢 var arr = [`大漠`,'30','W3cplus']; console.log(arr); // ["大漠", "30", "W3cplus"] var arr2 = arr.concat('Blog','2014'); console.log(arr2); // ["大漠", "30", "W3cplus", "Blog", "2014"] 二、解决方案 看上面的例子我们会发现var arr2 =这个地方就是关键了 我..
Vue2响应式 与 Vue3响应式
05-18
Vue2 和 Vue3 的响应式实现有一些区别。 Vue2 的响应式是通过 `Object.defineProperty` 实现的。在 Vue2 中，当你将一个对象或数组设置为响应式时，Vue 会递归地将该对象的属性转换成 getter 和 setter，当属性被...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值