vue父子组件钩子函数的执行顺序

Posted immeya

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue父子组件钩子函数的执行顺序相关的知识,希望对你有一定的参考价值。

加载渲染过程

 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

补充钩子函数的执行顺序

 

总结:
1.beforeCreate执行时:data和el均未初始化,值为undefined

2.created执行时:Vue 实例观察的数据对象data已经配置好,已经可以得到data的值,但Vue 实例使用的根 DOM 元素el还未初始化

3.beforeMount执行时:data和el均已经初始化,但此时el并没有渲染进数据,el的值为“虚拟”的元素节点

4.mounted执行时:此时el已经渲染完成并挂载到实例上

5.beforeUpdate和updated触发时,el中的数据都已经渲染完成,但只有updated钩子被调用时候,组件dom才被更新。

思考:
1.在created钩子中可以对data数据进行操作,这个时候可以进行数据请求将返回的数据赋给data

2.在mounted钩子对挂载的dom进行操作,此时,DOM已经被渲染到页面上。

3.虽然updated函数会在数据变化时被触发,但却不能准确的判断是那个属性值被改变,所以在实际情况中用computed或match函数来监听属性的变化,并做一些其他的操作。

4.所有的生命周期钩子自动绑定 this 上下文到实例中,所以不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是导致this指向父级。

5.在使用vue-router时有时需要使用<keep-alive></keep-alive>来缓存组件状态,这个时候created钩子就不会被重复调用了,如果我们的子组件需要在每次加载或切换状态的时候进行某些操作,可以使用activated钩子触发。

以上是关于vue父子组件钩子函数的执行顺序的主要内容,如果未能解决你的问题,请参考以下文章

vue父子组件钩子函数的执行顺序

vue 父子组件生命周期函数执行顺序

Vue父子组件生命周期执行顺序

vue父子组件加载顺序

前端技能树,面试复习第 46 天—— Vue 生命周期 | 父子组件钩子的执行顺序 | 组件间通信有哪些方式

vue 生命周期 和 生命周期的执行顺序