vue.js - 如何处理我的 vue 组件中更改的任何数据？

Question

我知道我可以“观察”我data在 vue 中更改的特定属性，但是是否可以处理组件数据更改的任何部分？

例如，我有：

data() {
   return {
     myProp: false,
     myOtherProp: true
   }
}

我可以像这样添加手表：

 watch: {
    "myProp": function(val, oldVal) {
      // Do something
    }
}

也可以添加一个myOtherProp，但实际上我有很多属性，如何为所有属性添加一个处理程序？

进一步的背景

这里的最终目标是检测“脏”状态，以便我可以确定是否警告用户他们可能会丢失未保存的更改。

我试过的

我知道我可能可以将我在数据中的所有属性组合成一种类型，然后观察它，但目前这种变化太具有破坏性，风险太大。我很想知道全局处理程序是否可行。

标签： vue.jswatch

Answer 1

最简单的方法是创建一个computed属性，当这个属性改变时，你可以调用你的函数：

computed: {
    hash () {
      return `${this.myProp}
          |${this.myOtherProp}
   }
},
watch: {
   "hash": function(val, oldVal) {
      // Do something
    }
}