时间戳

首页 > 解决方案 > 在父组件中使用 v-if 和在子组件的根中使用 v-if 有区别吗？

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

问题描述

假设我们有两个组件 -<Parent/>和<Child />，并且必须有条件地渲染子组件。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>

我知道他们有效地做同样的事情，但是当父级进行条件渲染时，是否有像 vue 这样的东西能够做更多的优化？或者与另一种方式相比，一种方式有其他好处吗？

标签： vue.jsvuejs2vuejs3

解决方案

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

推荐阅读