javascript - 响应式(Reactive)更新 Vue JS 中的资源？

Question

我想在每次用户更改页面上的数据时将表单数据保存到后端(理想情况下有一个超时，等待用户停止进行更改然后保存)。

我想到了一些处理这个问题的方法。我可以在所有字段上放置更改事件来执行此操作。我还可以尝试使用计算变量，并在每次设置对象时添加对 set 方法的调用，但这似乎过于复杂。

我还没有看到很多人用 Vue JS 来做这件事的例子。有明确的方法吗？有没有一种方法可以简单地说在数据对象更改时运行以下函数？

Answer 1

在输入上使用 debounce 属性:

https://vuejs.org/guide/forms.html#debounce

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

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