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

阿酒在看云

已于 2022-12-06 10:53:59 修改

阅读量4.4k

点赞数 6

CC 4.0 BY-SA版权

文章标签： vue.js

于 2021-06-24 15:32:32 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_34727238/article/details/118189409

本文探讨了在Vue中如何避免新变量修改影响原始数据，通过实例说明了使用`JSON.parse(JSON.stringify())`进行数据深拷贝的重要性。了解如何保护源数据，避免意外修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 数据赋值给新变量后，原数据也随新变量对数据的变化而变化

错误：

let list = this.list1

错误写法将污染源数据，将改变list1的数据

正确：

let list = JSON.parse(JSON.stringify(this.list1));

备注：

**JSON.stringify()**方法用于将 JavaScript 值转换为 JSON 字符串。

JSON.parse() 方法将数据转换为 JavaScript 对象。

JS 对象(Object)和字符串(String)互转方法

🌰：

利用原生JSON对象，将对象转为字符串

var jsObj = {};
jsObj.testArray = [1,2,3,4,5];
jsObj.name = 'CSS3';
jsObj.date = '8 May, 2011';
var str = JSON.stringify(jsObj);
alert(str);

从JSON字符串转为对象

var jsObj = {};
jsObj.testArray = [1,2,3,4,5];
jsObj.name = 'CSS3';
jsObj.date = '8 May, 2011';
var str = JSON.stringify(jsObj);
var str1 = JSON.parse(str);
alert(str1);