最近在开发中遇到一个问题,就是由于对父子组件生命周期钩子函数执行顺序理解不透彻引起的。问题是这样的:有一个组件由一系列子组件组成,子组件又被分解成组件,这样下来构成了三级组件。需求是在组件显示在页面上之后,再将数据初始化进行回显。父组件获取数据后传递到子组件,要求子组件根据这个值将内部元数据进行过滤和加工。那么在子组件中什么时机下才能获取父组件传递过来的新值呢?
我的做法是这样的:最高层父组件的mounted中发起请求获取数据,通过vue的响应机制以props的形式传递到子组件,在子组件的mounted中拿到对应的props进行处理。这样做法要求父组件的mounted时机先于子组件的mounted,但事实是这样吗?显然不是。
探究
探究的方法是:写一个有父子嵌套关系的组件,分别在他们的钩子函数中打印日志,观察执行顺序。得到的结果如图所示,父组件先创建,然后子组件创建;子组件先挂载,然后父组件挂载。
图片描述
子组件挂载完成后,父组件还未挂载。所以组件数据回显的时候,在父组件mounted中获取api的数据,子组件的mounted是拿不到的。
仔细看看父子组件生命周期钩子的执行顺序,会发现created这个钩子是按照从外内顺序执行,所以回显场景的解决方案是:在created中发起请求获取数据,依次在子组件的created中会接收到这个数据。
// 父组件中
beforeCreate() {
console.log('parent beforeCreate')
},
created() {
console.log('parent created')
},
beforeMount() {
console.log('parent beforeMount')
},
mounted() {
console.log('parent mounted')
},
// 子组件中
beforeCreate() {
console.log('child beforeCreate')
},
created() {
console.log('child created')
},
beforeMount() {
console.log('child beforeMount')
},
mounted() {
console.log('child mounted')
},
观察执行顺序后发现:
参考资料:Vue中父子组件生命周期执行顺序初探