当外部库添加了未定义的属性时，Vue无法检测到更改

Question

我正在尝试制作表单渲染器，但是在正确更新表单内容时遇到了问题。我创建了一个最低版本的沙箱：https://codesandbox.io/s/23z4y1n9kp

问题

该表单具有三个字段：a，b和c。初始化时使用a的值和b的值，而不是c的值。当更新a或b的值时，我也看到表单内容更新，并且在控制台中，我看到以正确的值调用了setter方法。但是，当我填写c的值时，页面中似乎什么也没有发生，但是控制台指示设置器已正确调用。这意味着文档对象已正确更新，但是Vue不知道。

外部库调用设置程序

我了解 Vue无法监视未定义的属性或检测新属性（https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats）。您应该执行Vue.set以使Vue观看它们。但是，在这种情况下这是不可能的，因为我使用的是外部库来进行值的实际设置：docmod。

我在沙盒中包含了库的最低版本，以使您了解库的功能。正是这个库将字段的值添加到文档对象中。它使用特定的获取器和设置器来执行此操作，我想保留这些获取器和设置器，以确保docmod保持预期的工作状态。

我不能做的事情

• 通过设置c定义documentContent: { value: { a: '1', b: 'foo', c: '' }}。事先未知会出现什么性质
• 更改docmod库以将Vue.set放入其中

可能的解决方案

有没有一种方法可以使Vue监视完整的文档对象并检测没有初始值的字段中的更改？假设docmod可以通知我某些内容改变了，我可以强制Vue以某种方式更新其页面吗？我可以重新定义值的对象属性，以使用一些调用Vue.set的代码包装原始的getter和setter吗？

非常感谢您的帮助！

Answer 1

您可以致电this.$forceUpdate();强制Vue更新屏幕。不建议使用这种方式，但是在您的情况下，我看不到其他任何东西。

在此处查看更新的版本：https://codesandbox.io/s/zk4vy6qly3

我在您的refresh中添加了方法Form.vue，该方法绑定到您的文本框@input。此方法调用this.$forceUpdate();导致Vue重新呈现。