Vue 赋值后原数据随赋值后的数据的变化而变化

最新推荐文章于 2025-08-05 22:11:48 发布

是二牙

最新推荐文章于 2025-08-05 22:11:48 发布

阅读量279

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_38810813/article/details/140147937

最近项目遇到的一个功能点拿到了同一个数据源需要在原有的数据源处理之后分为3个板块所以处理其中一个table内的数据后其他两个table的数据也会跟着变查了一下有一种说法是浅拷贝和深拷贝学到了深拷贝的方法记录一下

 this.goodsReplenData = JSON.parse(JSON.stringify(this.goodsReplenData));//补货商品原数据 给一键填充用

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

是二牙

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

解决Vue数组数据变化了，赋值后视图没更新的问题

qq_37635012的博客

03-20

5045

最近遇到一个问题，表格数据变化了，直接赋值后视图没更新，打印表格数据发现是最新的数据，这主要是因为，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。最开始我是直接将后端返给我的数组res.result.listpg进行赋值，没显示出来，然后我用map处理了一下。通过map数组方法，对数组里面的每条数据进行重新处理，将返回的新的数组重新赋值给当前的数组。

vue 赋值后原数据随赋值的改变而改变

程序员柱子的博客

08-04

563

let data = JSON.parse(JSON.stringify(this.datas)); 转自:https://blog.csdn.net/qq_34607371/article/details/102515487链接

参与评论您还未登录，请先登录后发表或查看评论

VUE2两个数组赋值相同时，修改一个数组另一个数组也会改变的问题

编程不过是一门失传艺术的别名，这门艺术的名字叫做“思考”

04-28

875

VUE2中两个数组来源于同一个对象的指针引用，数组间传递的是引用地址，因此两个数组引用的是同一个对象，只要其中一个数组改变，另一个数组就会改变。定义了两个属性A、B，都是数组类型，两个属性同时赋予了同样的值。目的：a操作后，A数组会更改，b操作后，A数组的值会变回B数组。结果：A数组更改后，B数组同时被修改。

vue中this的数组赋值后，改变随着改变原数据

qq_39151491的博客

01-08

2474

在vue项目中，把某个对象数组赋值给一个变量，改变这个变量中的某个对象的格式，会改变原数组；解决办法：将 let item = this.itemArray；改成 let item = JSON.parse(JSON.stringify(this.itemArray));即可。 ...

【Vue】vue 数据赋值给新变量后，原数据也随新变量对数据的变化而变化解决方案

一只洒鹿

06-24

4448

vue 数据赋值给新变量后，原数据也随新变量对数据的变化而变化错误： let list = this.list1 错误写法将污染源数据，将改变list1的数据正确： let list = JSON.parse(JSON.stringify(this.list1)); 备注： **JSON.stringify()**方法用于将 JavaScript 值转换为 JSON 字符串。 JSON.parse() 方法将数据转换为 JavaScript 对象。 JS 对象(Object)和字符串(String)

解决vue接口数据赋值给data没有反应的问题

10-18

今天小编就为大家分享一篇解决vue接口数据赋值给data没有反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue赋值成功后再回调_vue的数据赋值联动改变解决方案

weixin_39524247的博客

01-13

1217

最近连着做了好几个vue项目，从0到版本迭代，vue教程算是好理解，把vue官方文档看一遍下来，基本上不会有什么大问题(嗯如果你看的够仔细够透彻的话)，此篇是记录vue踩过的坑以及可以优化的地方。1.踩坑1.1.深拷贝/浅拷贝这实际上算不上vue的问题，算是js基础没打好的坑吧。先来看一个简单的例子：let obj = {name:'fiona-SUN'};let copyObj = obj;co...

Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)

12-01

1、使用Vue.js实现双向表单数据绑定，例子  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &lt...

vue引用传递——赋值后，新变量数据改变，原变量的数据也随之改变了

weixin_39709920的博客

03-21

1599

JSON.stringify 将一个 JavaScript 值(对象或者数组)转换为一个 JSON 字符串。JSON.parse 用来解析 JSON 字符串，将数据转换为 JavaScript（对象或者数组）本来需要的是this.updateForm的值始终不变，只有updateQuery的值在变化。updateQuery的值发生变化时，this.updateForm的值也随之改变了。在vue中，数组和对象传递都是引用传递。赋值时传递的并不是值，而是指向了同一个空间。

Vue中变量赋值后，修改变量，赋值数据与被赋值数据同步改变

weixin_42427230的博客

11-22

3670

在vue中，变量赋值，修改变量会导致原始数据也同步发生改变 let a = this.file, 修改a时，this.file也改变了原因：这是一个引用传递而不是值传递解决：把this.file转换为字符串再转换为对象后赋值 let a = JSON.parse(JSON.stringify(this.file)); ...

vue将定义在data中的对象数据赋值给变量后，原数据随新变量数据的变化也发生变化

weixin_52606798的博客

01-16

1134

直接赋值，只是地址指向，两个对象使用相同的地址，左边的变量指向的地址和右边的变量一样，持有相同的引用，所以对newObj修改，oldObj的值也会变化。对newObj进行操作，对应的oldObj的数据会随之变化。先将原对象转换成字符串，再转化为对象或进行深拷贝。在方法中使用将该数据赋值给一个新的对象进行使用。

修改一个数组的值，另一个数组的值也会改变

小白白的博客

11-29

991

vue中如果在data中定义了一个数组变量（list），在js中把这个变量的值重新赋值给另一个数组（newList）如果是直接 “ = ” 赋值，这个时候修改newList里面的值，list也会变解决办法使用JSON.parse(JSON.stringify()) （深拷贝）赋值。

vue中变量赋值后，改变原数据

weixin_44488084的博客

12-01

1018

使用this.xxx = this.yyy后，后续修改xxx后，yyy会随之改变，因为它俩指向的是同一对象地址解决方式： this.xxx = JSON.parse(JSON.stringify(this.yyy))

vue 一个对象给另一个对象赋值后，修改任意一个，两个都会变

BillKu的博客

10-14

532

解决方法：let dataNew: SampleItemResultUpload[] = JSON.parse(JSON.stringify(data));问题描述：vue 一个对象（data）给另一个对象（dataNew）赋值（直接赋值或者解构赋值）后，修改任意一个，两个都会变。原因分析：对象赋值之后只是将地址指向同一块内存空间，A=B，A和B指向同一块内存地址，修改A后B所指向的地址的值也会发生改变。

vue 对象拷贝,解决引用赋值内容变化会修改原对象的方式

一川死水

10-24

411

在vue项目中,遇到一个小问题,前端需要将后台接口传过来的数据展示在界面中,然后需要修改这个数据的时候,源数据也会发生变化,要避免源数据发生变化,则使用Object.assign即可。

1.6 vue 监听

chxii的专栏

08-02

551

Vue2中watch功能详解：通过watch选项和$watch方法实现数据监听。watch选项支持静态定义监听器，可配置deep（深度监听）和immediate（立即执行）；$watch方法则支持动态添加/移除监听器。监听对象深层属性推荐使用函数方式或配合计算属性。两者各有优势，watch选项适合初始化时静态监听，$watch方法更适合运行时动态管理监听器生命周期。

Vue 3.0 Composition API：重新定义组件逻辑的组织方式

你若盛开，清风自来

08-02

930

Vue 3.0的Composition API为组件开发带来了革新性改变。它通过setup、reactive、ref等核心函数，实现了更灵活的逻辑组织和复用方式，特别适合复杂组件和大型项目开发。与Options API相比，Composition API提供更好的类型支持，更紧密的TypeScript集成，以及更清晰的代码结构。在实际应用中，它能有效提升代码可维护性和可扩展性。最佳实践包括编写结构化代码、优先测试关键功能、采用数据驱动测试等。Composition API的出现使Vue开发更加现代化，为构建

VUE-第二季-02