Performance 在vuejs中列表的每个元素中都有一个模式组件（默认情况下不渲染）可以吗？

在我们的应用程序中有几个项目列表，每个项目都有一个按钮来打开一个模式

给定列表的模式始终相同，但显示的信息取决于项目

现在，我有两个解决方案：

一,。每个列表一个单一模式

模态在列表组件中仅存在一次

相关信息从数据中称为selected的局部变量传递到模态组件。 每个项目都有一个按钮，用于选择模式的相关信息

第一个解决方案带来了一些奇怪的机制，在模式中有专门的信息。 我真的不喜欢这种方法，因为它引入了一些重复

// example pseudo markup
<div v-for="item in items">
    <a @click="selected = item"></a>
</div>

<Modal data="selected"/>

二,。每个项目一个模式

模态包含在带有专用按钮的组件中。对每个元素重复该操作，但直到单击该按钮后才会渲染该模式

这一个非常方便，我喜欢这样一个事实，即我们可以用一种干净的方式封装责任

// example pseudo markup
<div v-for="item in items">
    <ButtonWithModal :info="item"/>
</div>

问题:

---

我只是想知道将来是否会出现性能问题。或者如果真的有其他错误。

如果模态差异足够大，我认为每个组件有一个模态是有意义的。如果未渲染，则不应具有任何性能。问题。不需要过早地优化。简单易懂的代码更易于维护。如果您只是渲染一组模态，那么您不应该有任何性能问题

很难说是基于什么，因为没有太多关于数据类型和模态有多不同的信息。当然，您可以使用不同的模态，并且仍然可以重用组件：

<SomeModal>
  <ModalInputWithErrors v-model="some-data" />
</SomeModal

<AnotherModal>
  <ModalWithWithErrors v-model="another-data"
</AnotherModal />

更容易理解，并且除了一个额外的.vue文件之外，您并没有真正地复制代码，该文件可以共享通用组件，并且在需要的地方有专门的组件

接下来，您可以使用它，它只允许在您的情况下加载javascript，即在单击模式时加载模式代码。这样，您就可以为每个项目使用特定的模态，并且仍然有一个小的捆绑包——只需在需要时加载模态代码，可能是在用户单击某个项目或将鼠标移到桌子上时