Nuxtjs/Vuejs Watchers 由于值的变化而陷入无限循环

Question

我正在开发一个Nuxtjs/Vuejs 应用程序来转换XML->JSON，反之亦然。用户可以向textarea 提供值，这些textareas 由CodeMirror 管理。

textarea 从Vex Store 绑定到V-model。我在这些Vuex 状态变量上添加了Watchers，因此每当它们更改值时，我都想将相应的数据转换为不同的格式。即，如果XML 值发生变化，则需要将XML 转换为JSON。同样，如果JSON 的值发生变化，则需要将JSON 转换为XML。

当我将XML 复制粘贴到XML textarea 中时，它第一次可以完美运行，但我进行了任何修改并尝试在XML 中引入一些Syntax 错误，然后我遇到了以下问题： watchers 开始互相调用，最终陷入无限循环。

我在CodeSandbox:https://codesandbox.io/s/boring-water-g14zd?file=/pages/index.vue中提供了示例代码

重现问题的步骤：

1. 在XML Area中提供Sample XML：

<root>
<name>Batman</name>
</root>

我们得到的输出为：CONVERT TO JSON-LD 内的JSON textarea

1. 现在通过删除一些 anchor 选项卡 (</>) 对 XML Textarea 中的相同 XML 进行修改

现在textarea 都填充了Error Message，但实际上我只希望JSON 区域填充Error Message 指示XML 中有什么问题，Modified XML 应该在@987654359 中@。

如果您观察Console，那么您可以看到由于watchers，我遇到了cyclic issue。每当XML 值在XML Editor 内发生变化时，我都想调用jsonConverter，反之亦然，但我不想在converting 到JSON 之后进入XMLConverter。

有人可以向我解释一下如何避免这个问题吗？我没有所有想法，因为我无法直接获得onChange 的CodeMirror 我正在使用Watchers。如果有人有任何想法或解决方案，那就太好了，因为我花了一天多的时间来解决这个问题，但最终一无所获。

代码沙盒： https://codesandbox.io/s/boring-water-g14zd?file=/pages/index.vue

Answer 1

我认为这里的主要问题是您的 JSON 和 XML 值在太多地方受到控制。 v-models、观察者和 CodeMirror 事件。

我已经更改了您的代码并使 CodeMirror 成为值的主控制器。你可以在这里看到结果：CodeSandbox

为了防止解析循环，我将新值与存储中保存的值进行了比较。如果它们相同，则该值已由我们自己设置。如果它们不同，那么用户已经改变了它，我们应该尝试解析。