vue2-vue3监听子组件的生命周期
为什么要监听子组件的生命周期？
vue3 关于 onMounted 的描述
vue2 关于 mounted 的描述
相关问题：
mounted 不会承诺所有的子组件也都一起被挂载，为什么会有这种情况发生？？
里面有个回复很完善
简短的答案。 假设一种例外情况。在你的组件中，包含一个异步组件。因为异步组件一定不会第一时间实例化，自然无法保证子组件节点挂载。
详细的答案。 因为生命周期属于组件，所以当虚拟 DOM 树对比完后，只会对此组件的虚拟 DOM 树要更新的部分做更新。而子组件在虚拟 DOM 树中，只知道子组件的构造器(Ctor)，传入的数据(data)和子项(children)有没有变化，不关心子组件内部的虚拟 DOM 树。因此，只能保证这个组件要去渲染它的子组件，却无法保证它的子组件内部是如何渲染的。
首先，要分清宏任务和微任务。当使用$nextTick时，将在微任务(不支持微任务的浏览器将回退至宏任务)堆栈中入栈你写的回调。如果所有子组件都已经下载完毕，并在Vue中定义，则从根组件往后渲染时，因为用的都是同步方法，微任务将在这些同步方法后被执行，所以大多数时候可以通过$nextTick 获取子组件渲染后的 DOM 节点。但是如果实例化组件的时候，有其他微任务入栈，就要看微任务队列的执行顺序了，所以无法完全保证。对于异步组件，由于网络原因，import 微任务总在$nextTick 之后，所以总是拿不到子组件的 DOM。而在 setTimeout 一定时间之后，由于 setTimeout 是宏任务，所以一般会在渲染后执行。但对于异步组件，如果由于网络延迟，导致微任务在宏任务之后入栈，则在 setTimeout 的回调中仍无法获取子组件的 DOM。 简单的来说，由于有异步执行顺序的影响，只能保证单独组件内部的执行顺序，无法保证其他组件的解析注册执行顺序。
vue2 监听子组件的生命周期
vue
<template>
<div>
<testCom @hook:mounted="doSomething"></testCom>
</div>
</template>
<script>
import testCom from '@/components/test-com.vue'
export default {
components: {
testCom,
},
methods: {
doSomething() {
console.log('子组件的生命周期mounted执行完毕')
},
},
}
</script>
注意是子组件的 mounted 执行完毕之后，才会触发hook:mounted
// father.vue
<Child @hook:mounted="doSomething" ></Child>
doSomething() {
console.log('父组件监听到 mounted 钩子函数22 ...');
},
// Child.vue
mounted(){
console.log('子组件触发 mounted 钩子函数11 ...');
},
也就是是说子组件中有mounted生命周期，
我们在父页面中使用了@hook去监听生命周期
它的打印顺序是怎么样的呢？【先子后父】
// 以上输出顺序为：
// 子组件触发 mounted 钩子函数11 ...
// 父组件监听到 mounted 钩子函数22 ...
vue3 监听子组件的生命周期
vue
<template>
<div>
<TestA @vnode-mounted="sonMounted"></TestA>
<TestB></TestB>
</div>
</template>
<script setup lang="ts">
import { reactive, ref, markRaw } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core'
import TestA from '../components/TestA.vue'
import TestB from '../components/TestB.vue'
onMounted(() => {
console.log('页面中的生命周期')
})
const sonMounted = () => {
console.log('子组件的生命周期已经渲染染成')
}
</script>