父组件.vue
<script>
import Child from './Child'
export default {
beforeCreate() {
console.log('父组件 beforeCreate')
},
created() {
console.log('父组件 created')
},
render() {
console.log('父组件 render')
return (
<div>
<h1>父组件</h1>
<Child />
</div>
)
},
beforeMount() {
console.log('父组件 beforeMount')
},
mounted() {
console.log('父组件 mounted')
},
components: { Child }
}
</script>
<style>
div {
text-align: center;
}
</style>
子组件.vue
<script>
export default {
beforeCreate() {
console.log('子组件 beforeCreate')
},
created() {
console.log('子组件 created')
},
render() {
console.log('子组件 render')
return (
<div>
<h3>子组件</h3>
</div>
)
},
beforeMount() {
console.log('子组件 beforeMount')
},
mounted() {
console.log('子组件 mounted')
}
}
</script>
结论
父组件初始化 -> 父组件渲染完毕 -> 子组件初始化 -> 子组件挂载完毕 -> 父组件挂载完毕
也就是：父beforeCreate、父created、子beforeCreate、子created、子beforeMounte、子mounted、父beforeMounte、父mounted
在父组件挂载完成后，子组件知道父组件已经挂载
