vue.js 在父组件中使用v-if和在子组件的根上使用v-if有什么区别吗？

4ioopgfo 于 2023-11-21 发布在 Vue.js

关注(0)|答案(2)|浏览(186)

假设我们有两个组件-<Parent/>和<Child />，并且必须有条件地呈现子元素。在父元素中使用v-if来呈现子元素和在根元素上的子元素中使用v-if有什么区别吗？

父级条件渲染：

<!-- Parent.vue -->
<div>
  <Child v-if="displayChild' />
</div>

<!-- Child.vue -->
<div>
  ...
</div>

字符串

条件渲染子项：

<!-- Parent.vue -->
<div>
  <Child />
</div>

<!-- Child.vue -->
<div v-if="displayChild">
  ...
</div>

型
我知道他们实际上做了同样的事情，但是当parent做条件渲染的时候，是否有像vue这样的东西能够做更多的优化？或者一种方式与另一种方式相比有其他的好处？

2条答案

我认为将v-if保留在父组件中可以防止子组件的生命周期不被调用，因为子组件没有呈现，而将它放在子组件中需要在v-if被处理之前加载子组件？

我同意@KMLong的回答。
我还想补充一点，在components根元素中使用v-if时，有一个eslint-plugin-vue会出错。
所以这个-

<!-- Parent.vue -->
<div>
  <Child />
</div>

<!-- Child.vue -->
<div v-if="displayChild">
  ...
</div>

字符串
将显示在Child.vue文件中的错误，如果你悬停在v-if上并安装了插件。
因此，我认为我们不应该像你的例子中那样做**“孩子做条件渲染“**：