动态创建组件的 Vue 响应性

Question

我们使用 TypeScript 和 vue-property-decorator 使用 VueJS 构建了一个所见即所得的编辑器。我无法真正详细说明，提取一段代码以显示该问题几乎是不可能的。因此，我希望我能充分解释这个问题，也许有人可以给出一些指示，我们可能有错误。

根组件是布局编辑器，它有一个布局面板和一个属性面板，类似于胖客户端。您可以使用drag&drop component 在此布局面板中排列元素。 组件层次结构是这样的： LayoutEditor -> BaseElement（包含拖放组件）-> Actual Element（位于拖放组件的槽中）。 一些简化的代码示例：

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

基本元素：

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

问题

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

有什么想法是我们在添加新元素时可能犯的错误吗？

Answer 1

根据您的描述，这可能是复杂对象嵌套的问题，已知存在反应性问题

有时您可能希望将多个属性分配给现有的 对象，例如使用 Object.assign() 或 _.extend()。然而，新 添加到对象的属性不会触发更改。在这样的 情况下，创建一个新对象，其属性来自原始对象 对象和 mixin 对象。

现在，我看到从数据库中获取属性时没有这个问题，因此可以看看如何将属性添加到新创建的元素；因为当您从数据库中下拉所有属性时，您的后端代码很可能已经实例化了所有属性。

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

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

但是，如果我在前端创建用户（例如在注册表单中），我将没有 id，直到我将其添加到用户以防创建成功。根据我在商店中定义我的用户的方式，以及我添加新属性的方式，这些是否会是反​​应性的。

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

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