vue js中如何保持数据不变答案

【问题标题】：How to hold data without change in vue jsvue js中如何保持数据不变
【发布时间】：2018-06-17 09:59:32
【问题描述】：

我有一个这样的用户信息对象

data: function(){
  return {
    userinfo: {
       name:'',
       username:'',
       imagePath:''
   },
    previousUserInfo:{}
  }
 }

我在其他地方显示此用户信息：

<template>
  <div> user name: {{userinfo.name}}</div>
  <div> username: {{userinfo.username}}</div>
                  ....

在某些情况下，当前用户发生变化，我应该将以前的用户数据保存在 previousUserInfo 对象中：

 this.$set(this, 'previousUserInfo', this.userinfo);

但是当用户在 userinfo 中填写新数据时，previousUserInfo 数据也会发生变化。

我也尝试使用另一个变量来保存数据，但 reuslts 是相同的：

var previousUserInfo = this.userinfo;
this.$set(this, 'previousUserInfo', previousUserInfo);

有什么问题？

【问题讨论】：

【解决方案1】：

this.userinfo 和 this.previousUserInfo 指向同一个对象。

你可以尝试做this.userinfo的深拷贝值

 this.$set(this, 'previousUserInfo', JSON.parse(JSON.stringify(this.userinfo));

【讨论】：