确定 Vue.js 数据是否已被编辑

Question

目前我有一个从我的服务器返回的数据对象，它使用 v-model 绑定到一系列输入。我正在尝试做的是确定是否对从服务器返回的对象进行了任何更新。

在 created() 生命周期中，我向 API 发出 GET 请求以获取服务器数据，然后在组件上将其保存为 data()：

data() {
 return {
   user: {
    name: 'Marcus'
   }
 }
}

然后我在组件内部有一个输入，它利用 v-model 绑定值：

<input type="text" id="name" v-model="user.name" />

我想做的是能够判断 user.name 或 user 对象中可能从服务器返回的任何其他 key/value 对是否已更改.

我创建了一个 example fiddle here。

尝试 1

我的第一个想法是创建某种比较，因为当我从我的 GET 请求成功设置 user 对象时，继续创建一个 "default" 对象然后比较：

const hasEdits = JSON.stringify(this.default.user) === JSON.stringify(this.user)

但是，当对输入字段进行任何更新时，v-model 似乎也会同时更改 user.name 和 default.user.name。

想法

如何在不更新这两个实例的情况下比较这两个对象？
我希望能够创建某种方法，允许我动态创建一个 "edited" 类型的对象，但是当我嵌套了 key/value 对时，我不明白如何首先在新编辑的对象中创建必要的结构，因为它 returns 未定义。如果我能够解决这个问题，我可以只测试编辑的对象是否为真，然后使用展开运算符合并数据，然后再与原始返回的对象一起发送。

Answer 1

要分离备份副本和编辑副本，您可以克隆从服务器返回的对象（取自您的fiddle）：

created() {
    const serverObj = { name: "Marcus" };
    this.user = serverObj;
    this.saved.user = JSON.parse(JSON.stringify(serverObj)); 
}

这将为备份数据创建一个新对象，因此 v-model 绑定不会影响它。我不确定通过将两者序列化为 JSON 来比较它们是否稳定。您可能需要查看 here 替代深度比较方法。

Determining if Vue.js data has been edited