vue2 详细-生命周期

108 阅读1分钟

最近在编写自己的组件库,所以需要对vue的生命周期非常的了解,顺便复习了一下知识点。

下面场景我们使用两个组件parent和child,parent包含child

众所周知,一个标准组件的执行顺序

graph TD
beforeCreate --> created --> beforeMount --> mounted --> beforeUpdate-->updated-->beforeDestroy-->destroyed

实例中parent,child两个父子组件的执行顺序如下?

parent --- beforeCreate
parent --- created
parent --- beforeMount
 child --- beforeCreate
 child --- created
 child --- beforeMount
 child --- mounted
parent --- mounted
parent --- beforeUpdate
 child --- beforeUpdate
 child --- updated
parent --- updated
parent --- beforeDestroy
 child --- beforeDestroy
 child --- destroyed
parent --- destroyed

1.0.0

1.parent何时能调用child如上parentbeforeMount之后child才开始创建,所以在parentmounted才能取child 如上parent --- beforeMount之后child才开始创建,所以在parent的mounted才能取child 2.child何时能调用parent如上childbeforeCreate开始时parent就已经执行到beforeMount,所以child在初始就可以调用parent 如上child --- beforeCreate开始时parent就已经执行到beforeMount,所以child在初始就可以调用parent 3.如果我们在父子组件中所有钩子上都写上 this.$nextTick(() => { console.log() });他的执行顺序会是怎样

image.png

4.数据从parent注入child,变化时候钩子的调用情况

image.png