动态创建组件的Vue重新激活

Question

我们用VueJS使用TypeScript和房产装饰师构建了一个wysiwig编辑器。我真的不能详细讨论，提取一个代码片段来表明这个问题几乎是不可能的。因此，我希望我能充分解释这个问题，也许有人可以给我们一些指点，在那里我们可能有一个bug。

根组件是布局编辑器，它有一个布局面板和一个属性面板，类似于胖客户机。可以使用拖放元件在此布局面板中安排元素。组件层次结构如下: LayoutEditor -> BaseElement (包含拖放组件)、->实际元素(位于拖放组件的槽中)。一些简化的代码示例：

<layout-editor>
    <base-element v-for="(element) in elements" :element="element" :key="element.id"></base-element>
</layout-editor>

BaseElement：

<vue-draggable-resizable>
    <component
        :is="element.componentType"
        :data="element.componentData"
</vue-draggable-resizable>

问题

通过将一个新元素推入elements数组并保存属性，将其添加到布局编辑器中。然后，组件将根据其属性正确呈现，但对属性的任何进一步更改都不会反映在布局面板中。数据存储在mongodb中，因此当刷新整个页面并挂载带有其所有子元素的布局编辑器时，属性可以任意更改，并立即反映更改。只有新添加的元素的行为不同，如果elements数组是通过axios加载的，或者一旦加载了元素，我们就看不到有什么不同。如果新元素不能正确呈现，则更容易理解，但是对属性的第一次保存是有效的，只有后续的元素不能工作。

有什么想法吗?在添加新元素时，我们会犯什么错误？

Answer 1

正如您所描述的，这可能是复杂对象嵌套的问题，众所周知，存在着反应性问题。

有时，您可能希望将许多属性分配给现有的对象，例如使用Object.assign()或_.extend()。但是，添加到对象中的新属性不会触发更改。在这种情况下，使用原始对象和混合对象的属性创建一个新对象。

现在，我看到从DB获取属性时没有这个问题，因此可以查看如何将属性添加到新创建的元素中；因为当您从DB中提取属性时，所有属性都很可能已经由后端代码执行。

作为我所说的例子，让我们以一个用户为例。

如果我从数据库中提取一个用户，在非常简单的情况下，它有一个ID，一个电子邮件和一个psw。

但是，如果我在前端创建用户(如在寄存器形式中)，我将不会有id，直到我将它添加到用户，以防止成功的创建。取决于我如何在存储中定义用户，以及如何添加新属性，这些属性是否是反应性的。

通常使用Vue API方法Vue.set(obj,prop,value)或从存储的对象创建一个新对象来解决这个问题。

this.modifiedElement = {
    ...this.modifiedElement,
    foo: 'fresh-foo',
    bar: 'fresh-bar',
};