vue子父组件周期顺序_Vue生命周期以及子组件和父组件生命周期发生的先后顺序...

从没有认真想过Vue组件的生命周期&＃xff0c;以为所有的都是按created, mounted顺序发生和执行的。

直到今天在完成某一个业务时&＃xff0c;才认真去思考组件的生命周期、子组件与父组件创建和挂载的时间点。

VUE组件的生命周期

如Vue.js官网中所说&＃xff0c;Vue组件的生命周期可分为如下几个&＃xff1a;

beforeCreated(): 在组件创建之前触发

created(): 在组件创建后触发

beforeMounted(): 在组件挂载到页面之前触发

mounted(): 在组件挂载到页面之后触发

beforeUpdate(): 在某些数据改变触发页面重新渲染之前触发

updated(): 在某些数据改变触发页面重新渲染之后触发

beforeDestroy(): 在组件销毁之前触发

destroyed(): 在组件销毁之后触发

这些生命周期看似简单&＃xff0c;单个的组件的生命周期很简单&＃xff0c;但是多个组件组合在一起就会觉得比较复杂。

子组件与父组件生命周期发生的先后顺序

在父组件与子组件中分别加入created()和mounted()钩子函数

// outer.vue

created() {

console.log(&＃39;outer created&＃39;)

},

mounted() {

console.log(&＃39;outer mounted&＃39;)

}

// inner.vue

created() {

console.log(&＃39;inner created&＃39;)

}

mounted() {

console.log(&＃39;inner mounted&＃39;)

}

最后的执行结果是:

uter created

inner created

inner mounted

outer mounted

可以发现&＃xff0c;父组件先于子组件created&＃xff0c;而子组件先于父组件mounted。