Nuxtjs/Vuejs 观察者 运行 由于值的变化而陷入无限循环
Nuxtjs/Vuejs Watchers running into endless loop due to change in the values
我正在开发一个 Nuxtjs/Vuejs 应用程序来转换 XML->JSON，反之亦然。用户可以向 textarea 提供值，这些 textareas 由 CodeMirror 管理。
textarea 从 Vex Store 绑定到 V-model。我在这些 Vuex 状态变量上添加了 Watchers，所以每当它们更改值时，我想将相应的数据转换为不同的格式。即，如果 XML 值发生变化，则 XML 需要转换为 JSON。同样，如果 JSON 值发生变化，则需要将 JSON 转换为 XML.
当我将 XML 复制粘贴到 XML textarea 中时，这是第一次完美运行，但我进行了任何修改并尝试在 [=23] 中引入一些 Syntax 错误=] 然后我 运行 进入 watchers 开始互相调用并最终陷入无限循环的问题。
我在 CodeSandbox 中提供了示例代码：https://codesandbox.io/s/boring-water-g14zd?file=/pages/index.vue
重现问题的步骤：
- 在
XML Area中提供Sample XML:
<root>
<name>Batman</name>
</root>
我们得到的输出为：CONVERT TO JSON-LD 在 JSON textarea
中
- 现在通过删除一些
anchor 选项卡 (</>) 对 XML Textarea 中的相同 XML 进行修改
现在两个 textarea 都填充了 Error Message 但实际上我只希望 JSON 区域填充 Error Message 表明 [=91= 有什么问题] 和 Modified XML 应该与 XML Area.
中的一样
如果您观察 Console，那么您会发现由于 watchers，我 运行 变成了 cyclic issue。每当 XML 值在 XML Editor 内发生变化时，我想调用 jsonConverter，反之亦然，但我不想在 converting 之后进入 XMLConverter JSON.
有人可以向我解释一下如何避免这个问题吗？我正在 运行 放弃所有想法，因为我无法直接获得 CodeMirror 的 onChange 我正在使用 Watchers。如果有人有任何想法或解决方案，那就太好了，因为我花了一天多的时间来解决这个问题，但最终一无所获。
代码沙盒：
https://codesandbox.io/s/boring-water-g14zd?file=/pages/index.vue
我认为这里的主要问题是您的 JSON 和 XML 值在太多地方受到控制。 v-model、观察者和 CodeMirror 事件。
我已经更改了您的代码，并将 CodeMirror 设置为值的主要控制器。你可以在这里看到结果：CodeSandbox
为了防止解析循环，我将新值与存储中保存的值进行了比较。如果相同，那么这个值是我们自己设置的。如果不同，则说明用户已经更改了，我们应该尝试解析。
我正在开发一个 Nuxtjs/Vuejs 应用程序来转换 XML->JSON，反之亦然。用户可以向 textarea 提供值，这些 textareas 由 CodeMirror 管理。
textarea 从 Vex Store 绑定到 V-model。我在这些 Vuex 状态变量上添加了 Watchers，所以每当它们更改值时，我想将相应的数据转换为不同的格式。即，如果 XML 值发生变化，则 XML 需要转换为 JSON。同样，如果 JSON 值发生变化，则需要将 JSON 转换为 XML.
当我将 XML 复制粘贴到 XML textarea 中时，这是第一次完美运行，但我进行了任何修改并尝试在 [=23] 中引入一些 Syntax 错误=] 然后我 运行 进入 watchers 开始互相调用并最终陷入无限循环的问题。
我在 CodeSandbox 中提供了示例代码：https://codesandbox.io/s/boring-water-g14zd?file=/pages/index.vue
重现问题的步骤：
- 在
XML Area中提供Sample XML:
<root>
<name>Batman</name>
</root>
我们得到的输出为：CONVERT TO JSON-LD 在 JSON textarea
- 现在通过删除一些
anchor选项卡 (</>) 对
XML Textarea 中的相同 XML 进行修改
现在两个 textarea 都填充了 Error Message 但实际上我只希望 JSON 区域填充 Error Message 表明 [=91= 有什么问题] 和 Modified XML 应该与 XML Area.
如果您观察 Console，那么您会发现由于 watchers，我 运行 变成了 cyclic issue。每当 XML 值在 XML Editor 内发生变化时，我想调用 jsonConverter，反之亦然，但我不想在 converting 之后进入 XMLConverter JSON.
有人可以向我解释一下如何避免这个问题吗？我正在 运行 放弃所有想法，因为我无法直接获得 CodeMirror 的 onChange 我正在使用 Watchers。如果有人有任何想法或解决方案，那就太好了，因为我花了一天多的时间来解决这个问题，但最终一无所获。
代码沙盒： https://codesandbox.io/s/boring-water-g14zd?file=/pages/index.vue
我认为这里的主要问题是您的 JSON 和 XML 值在太多地方受到控制。 v-model、观察者和 CodeMirror 事件。
我已经更改了您的代码，并将 CodeMirror 设置为值的主要控制器。你可以在这里看到结果：CodeSandbox
为了防止解析循环，我将新值与存储中保存的值进行了比较。如果相同，那么这个值是我们自己设置的。如果不同，则说明用户已经更改了，我们应该尝试解析。