我的页面中有 20 个或 1 个带有 v-if 的组件有关系吗

Question

使用 Vue/NuxtJS 2 或 3 我遇到以下情况。我现在在 TableViewRow 组件中有模态组件。例如，这些模式用于显示行数据的编辑表单。这意味着模态组件存在 x 次，具体取决于显示的行数。可以是5次，可以是100次。虽然我用

v-if

渲染它们，但在表格组件本身上有一个模态并在商店中有一个 selectedROw 值用于确定选择哪一个不是更好吗？

我问这个是因为性能原因。我的假设是，只要

v-if

是

false

，它就不会渲染并且不消耗任何资源，但我无法验证。

Answer 1

如果没有示例，我真的不明白你的代码是谁。

但根据你的问题，是的

你应该避免重复并为所有行管理一个模式。对于您或其他开发人员来说，它更好且更容易理解。

而且，

就像你说的，v-if

不会被渲染（如果为假），你可以检查你的浏览器

HTML，但看不到代码。确实如此。

Nuxt 生成静态页面

服务器端，因此无论是否有条件，html 都将完整构建以具有 v-if

 可能是 

true 也可能是 false。该值可以在应用程序中随时更改，而 nuxt 不知道这一点。 Nuxt 需要构建每个案例。

我不是这个主题的专家，所以也许这不会（很多）影响渲染的 HTML，

但尽管如此，我会说这不是实现这一点的好方法，最好避免它。