关于 父子组件 的生命周期的执行顺序:
父组件:beforeCreate
父组件:created
父组件:beforeMount
子组件:beforeCreate
子组件:created
子组件:beforeMount
子组件:mounted
父组件:mounted
所以根据上述的顺序,如何保证父组件 mounted 结束后再进行子组件 mounted ?
解决: 由于打印的this 看指向及相关的属性发现,this中会有_isMounted这个属性,表示当前是否挂载完毕(true:挂载完毕,false:没有挂载完成),在父组件挂载前将 _isMounted 存在 window 中,挂载后更新 _isMounted。在子组件 mounted 中添加定时器,根据 _isMounted 判断是否执行初始化方法;
// 父组件
beforeMount() {
window.parentMounted = this._isMounted // _isMounted是当前实例mouned()是否执行 此时为false
},
async mounted() {
// 进行对应的方法请求
window.parentMounted = this._isMounted // _isMounted是当前实例mouned()是否执行 此时为true
}
// 子组件
mounted() {
let pMountedTimer = window.setInterval(() => {
if (window.parentMounted ) {
window.clearInterval(pMountedTimer)
// 下面就可以写子组件想在mounted时执行代码(此时父组件的mounted已经执行完毕)
}
}, 500)
}
这样就可以解决子组件中的mounted等待父组件mounted加载完成后再去初始化实例;