Vue父子组件生命周期执行顺序是什么
执行顺序:父组件先创建,然后子组件创建;子组件先挂载,然后父组件挂载,即“父 beforeCreate-> 父 create -> 子 beforeCreate-> 子 created -> 子 mounted -> 父 mounted”。
在单一组件中,钩子的执行顺序是 beforeCreate-> created -> mounted->… ->destroyed,但当父子组件嵌套时,父组件和子组件各拥有各自独立的钩子函数,这些父子组件的这些钩子是如何交融执行,且执行顺序又是怎样的呢?
父子组件生命周期执行顺序
组件,分别在他们的钩子函数中打印日志,观察执行顺序。得到的结果如图所示,父组件先创建,然后子组件创建;子组件先挂载,然后父组件挂载。
父 beforeCreate-> 父 create -> 子 beforeCreate-> 子 created -> 子 mounted -> 父 mounted
子组件挂载完成后,父组件还未挂载。所以组件数据回显的时候,在父组件mounted
中获取 api 的数据,子组件的mounted
是拿不到的。
仔细看看父子组件生命周期钩子的执行顺序,会发现created
这个钩子是按照从外内顺序执行,所以父子组件传递接口数据的解决方案是:
在created
中发起请求获取数据,依次在子组件的created
或者mounted
中会接收到这个数据。
父子组件生命周期执行顺序
加载渲染过程
父 beforeCreate->父 created->父 beforeMount->子 beforeCreate->子 created->子 beforeMount->子 mounted->父 mounted
销毁过程
父 beforeDestroy->子 beforeDestroy->子 destroyed->父 destroyed
常用钩子简易版
父 create->子 created->子 mounted->父 mounted
补充单一组件钩子执行顺序
activated
,deactivated
是组件keep-alive
时独有的钩子
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- activated
- deactivated
- beforeDestroy
- destroyed
- errorCaptured
总结
beforeCreate
执行时:data
和el
均未初始化,值为undefined
created
执行时:Vue 实例观察的数据对象data
已经配置好,已经可以得到data
的值,但 Vue 实例使用的根DOM
元素 el 还未初始化beforeMount
执行时:data
和el
均已经初始化,但此时el
并没有渲染进数据,el
的值为“虚拟”的元素节点mounted
执行时:此时 el 已经渲染完成并挂载到实例上beforeUpdate
和updated
触发时,el
中的数据都已经渲染完成,但只有updated
钩子被调用时候,组件dom
才被更新。- 在
created
钩子中可以对data
数据进行操作,这个时候可以进行数据请求将返回的数据赋给 data - 在
mounted
钩子对挂载的 dom 进行操作,此时,DOM 已经被渲染到页面上。 - 虽然
updated
函数会在数据变化时被触发,但却不能准确的判断是那个属性值被改变,所以在实际情况中用computed
或watch
函数来监听属性的变化,并做一些其他的操作。 - 所有的生命周期钩子自动绑定 this 上下文到实例中,所以不能使用箭头函数来定义一个生命周期方法 (例如
created: () => this.fetchTodos()
),会导致 this 指向父级。 - 在使用
vue-router
时有时需要使用来缓存组件状态,这个时候created
钩子就不会被重复调用了,如果我们的子组件需要在每次加载或切换状态的时候进行某些操作,可以使用activated
钩子触发。 - 父子组件的钩子并不会等待请求返回,请求是异步的,VUE 设计也不能因为请求没有响应而不执行后面的钩子。所以,我们必须通过 v-if 来控制子组件钩子的执行时机.
注意:在父组件传递接口的数据给子组件时,一定要在子组件标签上加上v-if="传递的接口数据"
在父组件的 created 中发请求获取数据,通过 prop 传递给子组件。子组件在 created 或者 mounted 中拿父组件传递过来的数据 这样处理是有问题的。
在父组件调用接口传递数据给子组件时,接口响应显然是异步的。这会导致无论你在父组件哪个钩子发请求,在子组件哪个钩子接收数据。都是取不到的。当子组件的 mounted 都执行完之后,此时可能父组件的请求才返回数据。会导致,从父组件传递给子组件的数据是 undefined。
解决方法 1:
在渲染子组件的时候加上一个条件,data1
是父组件调用接口返回的数据。当有数据的时候在去渲染子组件。这样就会形成天然的阻塞。在父组件的created
中的请求返回数据后,才会执行子组件的created
,mounted
。最后执行父组件的 mounted。
<div class="test"> <children v-if="data1" :data="data1" ></children> </div>
解决方法 2:
在子组件中 watch 监听,父组件获取到值,这个值就会变化,自然是可以监听到的
watch:{ data:{ deep:true, handler:function(newVal,oldVal) { this.$nextTick(() => { this.data = newVal this.data = newVal.url ? newVal.url : '' }) } }, }
从父组件点击调用接口并显示子组件,子组件拿到数据并监听在
watch
中调用方法并显示。
以下为子组件,data1 是从子组件传递过来的数据。在created
,mounted
中都拿不到父组件调用接口返回的 data1。 只能watch
监听 data1。并调用方法渲染子组件。
props:['data1'], watch:{ data1:{ deep:true, handler:function(newVal,oldVal) { this.$nextTick(() => { this.data1 = newVal this.showData1(this.data1) }) } }, }
以上就是 vue 父子组件生命周期执行顺序是什么的详细内容,更多请关注码云笔记技术博客其它相关文章!
码云笔记 » Vue父子组件生命周期执行顺序是什么