在父组件中使用 v-if 和在子组件的根组件中使用 v-if 有区别吗?

ajo*_*obi 4 vue.js vuejs2 vuejs3

假设我们有两个组件 -<Parent/><Child />,并且子组件必须有条件地渲染。v-if在渲染子元素的父元素中使用与在根元素的子元素中使用它之间有区别吗?

父级进行条件渲染:

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

<!-- Child.vue -->
<div>
  ...
</div>
Run Code Online (Sandbox Code Playgroud)

孩子做条件渲染:

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

<!-- Child.vue -->
<div v-if="displayChild">
  ...
</div>
Run Code Online (Sandbox Code Playgroud)

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

KML*_*ong 5

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