【记一下】vue、react项目中不直接操作原数据、对象

最新推荐文章于 2023-02-01 11:28:49 发布
最新推荐文章于 2023-02-01 11:28:49 发布
阅读量221 收藏
点赞数 1
文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45524754/article/details/120318419
版权

在实际项目中，如果要对复杂数据类型进行操作，不建议直接修改原数组】原对象，而是使用
let arr1 = […arr]
let obj1 = {…obj}
复制一份之后，对arr1和obj1进行操作
因为数据可能是循环arr数组生成的，key值很多时候是绑定的index，如果操作原数组arr会导致index变化可能会出现问题

我是你失散多年的总攻
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
object-path-immutable:修改深层对象属性而不修改原始对象（不变性）。 非常适合React和Redux
04-14
对象路径不变 小型JS库，无需修改原始对象即可修改深层对象的属性（不变性）。 与React（特别是在使用setState() ）和Redux（在reducer内部）配合使用时效果很好。 这可以看作是React Immutability Helpers和Immutable.js的一种更简单，更直观的替代方法。 变更日志 安装 npm install object-path-immutable --save 快速使用 下面，设置属性而不修改原始对象。 它将最大限度地减少线下的克隆数量。 生成的对象只是普通的JS对象文字，因此请注意，它将不会受到属性突变（例如Immutable.js ）的保护。 const obj = { a : { b : 'c' , c : [ 'd' , 'f' ] } } const newObj = immutable . set ( ob
详解从react转职到vue开发的项目准备
10-17
从React转职到Vue开发涉及到多个层面的技能转换和适应，特别是对于一直使用...在项目准备阶段，建议开发者深入阅读Vue官方文档，实践基本的组件创建、数据绑定、生命周期管理等操作，以便更快地适应Vue的开发模式。
[react] 如何解决引用类型在pureComponent下修改值的时候，页面不渲染的问题？
歌谣的博客
11-29 393
[react] 如何解决引用类型在pureComponent下修改值的时候，页面不渲染的问题？ 不要在state或者props当中修改数组或者对象 通过使用es6的assign方法或者数组的扩展运算符或者使用第三方库，强制返回一个新的对象 (页面为什么不渲染) 是因为组件内容是采用的浅拷贝，对象的值虽然发生改变，但是引用的地址没有发生改变 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
reactive 不要直接data=赋值！！！会丢失响应式的，如果用ref就不会
大雾起了清晨
06-08 505
reactive 不要直接data=赋值！！！会丢失响应式的，如果用ref就不会
vue中使用数据，却不修改原始数据（浅拷贝和深拷贝）
蓝_蓝的博客
03-13 1514
当你需要第一个对象的数据，并且想要合理修改和使用但是不想修改第一个对象的数据时，需要进行深拷贝
【react】hook中useState设置数据不能立即反映更改
热门推荐
weixin_44760923的博客
12-04 1万+
问题： 在业务代码中使用useState时发现，当我把一个修改后当数据set进state里面后，再次打印state中那个数据是初始状态的值，并未发生改变 const [list, setList] = useState([]); // 下面在某个方法里面调用 console.log(list); // [] setList([1,2,3]); console.log(list); // [] 原因： 类似于通过扩展React.Component或创建的class组件中的setState React.Pu
vue或react项目生产环境去掉console.log的操作
10-14
在构建Vue或React项目时，开发过程中我们通常会在控制台使用console.log()、***()、console.debug()等方法来打印日志信息，帮助我们调试程序。然而，在将应用程序部署到生产环境时，这些日志信息就不再需要了。此时...
React和Vue中监听变量变化的方法
10-17
在现代前端开发中，React和Vue作为两个流行的JavaScript框架，各自提供了一套监听组件内变量变化的方法。组件内变量变化的监听对于构建响应式应用至关重要，因为这样可以确保组件能够根据数据的变化实时更新UI。 在...
js/计网/Vue/React/网络安全/数据结构/GIT 面试题整理
最新发布
07-15
在本节中，我们将对 JavaScript 的基础知识点进行总结，涵盖了数据类型、变量声明、类型转换、操作符、函数等方面的知识点。 数据类型 在 JavaScript 中，有七种基本数据类型：Number、String、Boolean、Null、...
React开发的网站网页如何获取原始数据
weixin_48634509的博客
02-01 706
小案例系列之：使用react dev tools获取React开发的网站网页原始数据
React数据渲染
Cs_sssss的博客
07-18 301
条件渲染 { condition ? '❤️取消' : '
vue~对象数组深拷贝，不改变原数据结构
weixin_42806958的博客
06-17 1443
对象数组深拷贝
vue复制对象内容,且更改复制的对象信息原对象内容不变(仅复制对象非指针传递)
小馒头味的博客
12-18 2587
@TOC let {...data} = this.listQuery;
Vue中从不修改的数据如何处理？
大香蕉的博客
08-05 699
为什么不需要修改的数据要特殊处理？ 在我们日常开发过程中，可能会存在一些前台写死的数据，比如某些下拉框数据、单选框租数据等，此时我们无需vue内部将它处理为响应式的对象，如果此类数据也被处理为响应式对象，这无疑会加大内存的开销（vue中会遍历data中return出来的对象key进行响应式处理），影响页面响应速度。 如何处理？ 1、调用Object.freeze()方法处理不需要改变的数据。 Object.freeze()方法可以冻结一个对象。一个......
vue给数组和对象进行增加删除字段不更新数据的解决方法 — Vue.set(object, key, value)
小白变怪兽
07-02 1万+
关于为什么数据变动bu’chong不重新渲染， 官网已经介绍了， 这里就不再多说： 下面主要记录一下具体的操作代码： 组件基本代码： <style lang="sass"> </style> <template> <div> <div>
js对象去掉某一个属性并且不改变原对象的方法?
weixin_46409887的博客
08-19 1620
js对象去掉某一个属性，并且不改变原对象的方法?
Vue解决赋值后修改新数组、对象会影响原数组、对象
qq_44100778的博客
08-25 4100
当我们把一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。所以为了实现修改新对象而不影响原对象，我们需要进行深拷贝。 深拷贝 JSON.parse(JSON.stringify()) computed: { data: function () { var obj={}; obj=JSON.parse(JS
react中使用setState赋值后页面没有变化,直接赋值数值可以
业余前端的职业经历
03-07 4995
我在做一个选项卡的小demo的时候发现子组件更新父组件中的索引值的时候页面一直没有刷新 如果直接赋值为数值页面才会刷新 change(id){ this.setState({ index:id }) } 原来是我在子组件中使用了 ===全等符号进行比对这个要求数值和数值类型必须一直 这个时间我看了下传过来的 id的值类型原来是...
Vue基础语法01
weixin_43152611的博客
05-17 184
Vue是目前最好的国产前端渐进式框架，它与原生js和jQuery的最大区别就是Vue是直接操作数据来达到对页面的渲染，而原生js和jQuery都是操作Dom元素来渲染页面。Vue可以让开发人员“换一种思路”去开发前端页面。 注意：在学习Vue之前，必须学好html。css。js的基础知识 基本使用： 插值表达式 使用步骤： 1）、需要提供标签用于填充数据 注意： 在标签中我们使用插值语法的形式 即 {{}} 进行填充数据 2）、引入vue.js库文件 注意：一定要先引入Vue文件 在使用Vue语法 因为
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值