Vuejs2 如何在VueJs中实现脏状态

我是VueJs的新手，我正在制作一个表单，我希望仅在模型发生更改时启用

保存

按钮

我最初的想法是计算一个脏函数，将初始模型与当前模型进行比较

注意：此代码未经测试，此处仅作为示例

---

是否有更好的方法，或者您可以对上述代码提出改进建议？

您可以使用

watch

的

deep

选项，如中所示

借用-->

您可以在父容器上绑定单个

onchange

事件，并从更改事件气泡中获益：

<div class="container" @change="someThingChanged()">
  <input v-model="foo">
  <input v-model="bar">
  ... etc.
</div>

... 等

是将脏检查集成到应用程序中的便捷方法。Vue在这方面没有提供太多开箱即用的afaik。您的方法也可以工作，但您可能应该使用深度比较，而不是序列化和比较字符串（例如，lodash有一个有助于此的方法）。这是我为Angular和Vue应用程序所采用的方法。我觉得它给了你无限的自由。正如其他人所指出的，JSON字符串化/解析可能有一些限制，但即使是这些限制也可以一次克服一个，或者根据需要检查特定字段。我要添加的唯一更改是否定示例代码中的比较，尽管您注意到代码没有经过测试。@Draghon JSON.stringify可能会失败，如果某些成员丢失或顺序不同。最好使用函数谢谢你的回答，但我想测试模型是否与初始模型不同。如果有人更改了一个值，然后又将其更改回来，那么模型不是dirty，那么您需要保留一个加载模型的副本，并将其与用户在其监视程序中更新的模型进行比较，以便您可以更新dirty属性…如果您的数据模型只包含基本数据类型（数字、字符串、布尔值、Null）-然后你就可以摆脱你最初的想法。但是，如果您的数据模型包含日期、正则表达式、无穷大、NaN、循环引用，那么JSON.stringify将阻塞这些引用，并产生错误的结果或完全失败（例如，使用循环引用）。在这种情况下，您必须使用诸如deValue（）或JSON dry（）之类的工具，您可以删除监视程序并附加一个

@blur

或

@change

事件处理程序。这对我来说最有效，但dirty始终是真的，因为每次切换到新记录时都会触发监视程序。替换

this.dirty=true与
this.dirty=oldVal.id==newVal.id？真：假修复了这个问题。谢谢你的回答，但我发现deep watcher更干净。这是因为它在Vue对象中是自包含的，不依赖于模板代码，如果使用它，任何到Vuex的迁移都会容易得多。
var app = new Vue({
el: '#app',
data: 
{
  model:
  {
    a:0, 
    b:'', 
    c:
    {
      c1:null, 
      c2:0, 
      c3:'test'
    }
  },
  dirty: false
},
watch:
{
  model:
  {
    handler(newVal, oldVal)
    {
      this.dirty = true;
    },
    deep: true
  }
}
});

<div class="container" @change="someThingChanged()">
  <input v-model="foo">
  <input v-model="bar">
  ... etc.
</div>