响应式更新 Vue JS 中的资源？答案

【问题标题】：Updating a resource in Vue JS reactively?响应式更新 Vue JS 中的资源？
【发布时间】：2016-09-25 15:38:51
【问题描述】：

每次用户更改页面上的数据时，我都想将表单数据保存到我的后端，（最好有一个超时等待用户停止更改然后保存）。

我想了几种方法来处理这个问题。我可以在所有字段上放置更改事件来这样做。我也可以尝试使用计算变量，并在每次设置对象时添加对 set 方法的调用，但这似乎过于复杂。

我还没有看到很多人用 Vue JS 做这件事的例子。有明确的方法吗？有没有办法简单地说在数据对象发生变化时，运行以下函数？

【问题讨论】：

在 vuejs 指南中搜索 watch 方法。
@YerkoPalma 是最好的做事方式。我看着它，老实说，我不确定这是否不会产生与计算相同的问题，尤其是如果我正在观看的对象具有嵌套对象？
关于反应性，这两种方法在 Vue 中都没有太大问题。计算道具更容易，如果您喜欢观看，请将deep 选项保留为true，这样您还可以跟踪对象中的嵌套属性。 Vuejs 内部对此进行了优化（检查 this 与 react 的性能比较并阅读博文）
现在更新资源的部分很难优化，因为它会不断地调用你的服务器，肯定效率不高。我会在 js 中使用 timeOut 来定义一个 autosave 每 X 分钟。或者我会使用 Vuex 来保持我的应用程序的状态，并每隔几分钟甚至几小时保存一次，但时间范围很广。
@YerkoPalma 我的想法通常是使用 10 秒的超时。我会对对象进行字符串化并对其进行散列，然后等待超时，如果对象仍然产生相同的散列，那么它应该更新，否则它将放弃，因为应该再次触发超时函数。

【解决方案1】：

在您的输入中使用debounce 属性：

然后您可以按照 Yerko 的建议使用 watch() 方法。 Vue 中的属性在超时后才会更新，此时您的 watch 函数将触发。

如果这还不够强大，您必须保存 setTimeout 变量，然后取消它并在您的 watch 函数中使用 clearTimeout 重新启动它。这并不像听起来那么复杂，只是一个额外的变量和一个深度观察函数。

【讨论】：