正文
vue中父级与子组件生命周期的先后顺序
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1.vue的生命周期
2.views/createrCustormer.vue为父级
<template>
<expressService />
</template>
<script>
import expressService from '@/components/expressService'
export default {
components: {
expressService
},
beforeCreate() {
const time = (new Date()).getTime()
console.group('beforeCreate父级 实例初始化进行数据观测/事件配置', time)
},
created() {
const time = (new Date()).getTime()
console.log('created父级 实例创建完成', time)
},
beforeMount() {
const time = (new Date()).getTime()
console.group('beforeMount父级 挂载开始', time)
},
mounted() {
const time = (new Date()).getTime()
console.log('mounted父级 挂载到实例上', time)
},
beforeUpdate() {
const time = (new Date()).getTime()
console.group('beforeUpdate父级 数据更新前', time)
},
updated() {
const time = (new Date()).getTime()
console.log('updated父级 组件DOM更新', time)
},
beforeDestroy() {
const time = (new Date()).getTime()
console.log('updated父级', time)
console.group('beforeDestroy父级 实例销毁前', time)
},
destroyed() {
const time = (new Date()).getTime()
console.log('destroyed父级 实例销毁完成', time)
}
}
</script>
3.components/expressService.vue
<template>
<div class="expressService">
子级生命周期
</div>
</template><script>
export default {
beforeCreate() {
const time = (new Date()).getTime()
console.group('beforeCreate子级', time)
},
created() {
const time = (new Date()).getTime()
console.log('created子级', time)
},
beforeMount() {
const time = (new Date()).getTime()
console.group('beforeMount子级', time)
},
mounted() {
const time = (new Date()).getTime()
console.log('mounted子级', time)
},
beforeUpdate() {
const time = (new Date()).getTime()
console.group('beforeUpdate子级', time)
},
updated() {
const time = (new Date()).getTime()
console.log('updated子级', time)
},
beforeDestroy() {
const time = (new Date()).getTime()
console.group('beforeDestroy子级', time)
},
destroyed() {
const time = (new Date()).getTime()
console.log('destroyed子级', time)
}
}
</script>
4.打印看一下什么情况
从打印我们可以看出来，父级beforeMount挂载开始时才会进入到子级beforeCreate实例化开始，但是子级mounted挂载实例比父级mounted挂载实例要快1毫秒，为什么呢？并且子级初次渲染时没有数据更新，那什么时候子级会数据更新呢？
5.子级mounted挂载实例比父级mounted挂载实例要快1毫秒
当父组件执行完beforeMount挂载开始后，会依次执行子组件中的钩子，直到全部子组件mounted挂载到实例上，父组件才会进入mounted钩子
6.子级数据更新
当对子级进行事件处理时，就会触发哦，从下图可以看出，子级进行事件，会先触发父级beforeUpdate钩子，再去触发子级beforeUpdate钩子，下面又是先执行子级updated钩子，后执行父级updated钩子，同理与5相同
7.心得
这个问题之前在面试的时候被提到过很多遍，主要考的是对vue原理的深度了解的有多少，面试真的是一个了解当下前端趋势的一个很好的方法，面试中会遇到各种在工作中没有遇到过的问题，第一次不懂没关系，以后慢慢懂就好啦！欢迎大神来纠正bug，哈哈哈
