前言

我们知道，在Vue中，父子组件的挂载顺序为父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

也就是说，子组先mounted，父组件再mounted，但有时候我们会发现父组件会比子组件先挂载，那么这是为何呢？

其实是由于人为的操作导致其生命周期钩子进入执行栈的顺序发生了变化，那么哪些情况会发生变化呢，让我们来探讨一下吧

案例

我们创建两个父子组件，在组件的mounted中打印一句话，可以看到执行的顺序为：

这是我们预期中的正常结果

v-if

下面我们通过v-if来改变顺序

//子组件
<template>
  <div>我是子组件哦</div>
</template>

<script lang="ts" setup>
onMounted(() => {
  console.log('我是子组件');
});
</script>

//父组件
<template>
  <ContentWrapper>
    <child v-show="isShow"></child>
  </ContentWrapper>
</template>
<script lang="ts" setup>
import child from './components/child/index.vue';
const isShow = ref(false);
onMounted(() => {
  console.log('我是父组件');
  isShow.value = true;
});
</script>

从上面我们发现，通过v-if控制了子组件的显示和隐藏，且控制其显示隐藏的值是在父组件mounted时才改变，所以子组件一开始是不会创建的，直到父组件mounted之后才会创建，因此子组件的mounted肯定在父组件之后

那如果我们使用v-show呢？使用v-show会发现并没有改变生命周期是顺序，这是因为v-show只是在CSS样式上对元素进行隐藏，而v-if是通过display:none来设置的，两者的本质不同

v-if 在条件切换时，会对标签进行适当的创建和销毁，而 v-show 则仅在初始化时加载一次，因此 v-if 的开销相对来说会比 v-show 大。 v-if 是惰性的，只有当条件为真时才会真正渲染标签；如果初始条件不为真，则 v-if 不会去渲染标签。 v-show 则无论初始条件是否成立，都会渲染标签，它仅仅做的只是简单的CSS切换。参考文献：javascript - vue中的v-if和v-show的区别 - 个人文章 - SegmentFault 思否

Vue如何改变父子挂载顺序

前言

案例

v-if