Vue嵌套组件的生命周期

时间 2019-11-06

标签 vue 嵌套组件生命周期繁體版

原文原文链接

嵌套组件的生命周期

问：有A、B、C三个组件，A为B的父组件，B为C的父组件，它们的建立和挂载顺序是怎样的？即（beforeCreate/created，beforeMounte/mounted）的执行顺序。javascript

话很少说，直接上代码：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>嵌套组件的生命周期</title>
</head>
<body>
    <div id="app">
        <component-a />
    </div>   

    <script> Vue.component('component-a', { template: '<div><component-b></component-b></div>', beforeCreate () { console.log('beforeCreate: A'); }, created() { console.log('created: A'); }, beforeMount() { console.log('beforeMount: A'); }, mounted() { console.log('mounted: A'); }, }); Vue.component('component-b', { template: '<p><component-c></component-c></p>', beforeCreate () { console.log('beforeCreate: B'); }, created() { console.log('created: B'); }, beforeMount() { console.log('beforeMount: B'); }, mounted() { console.log('mounted: B'); }, }); Vue.component('component-c', { template: '<span>hello world</span>', beforeCreate () { console.log('beforeCreate: C'); }, created() { console.log('created: C'); }, beforeMount() { console.log('beforeMount: C'); }, mounted() { console.log('mounted: C'); }, }); const app = new Vue({ el: '#app', beforeCreate () { console.log('beforeCreate: Root'); }, created() { console.log('created: Root'); }, beforeMount() { console.log('beforeMount: Root'); }, mounted() { console.log('mounted: Root'); } }); </script>
</body>
</html>
复制代码

直接看打印结果：vue

beforeCreate: Root
created: Root
beforeMount: Root
beforeCreate: A
created: A
beforeMount: A
beforeCreate: B
created: B
beforeMount: B
beforeCreate: C
created: C
beforeMount: C
mounted: C
mounted: B
mounted: A
mounted: Root
复制代码

经过打印结果咱们能够看到，beforeCreate、created、beforeMounted是按顺序执行，由外到内；而mounted即最终的挂载阶段则是由内到外，先将子组件挂载到dom上，而后再是父组件。java

为何

其实想一想就知道了，既然组件之间存在父子关系，即父嵌套子，那么子组件就至关于父组件的一部分，那确定要先将其一部分先挂载到dom上，而后再将整个父组件挂载上去。git

总结

父子组件嵌套的生命周期其实都是 先父后子 而后 先子后父。后续再加入update和destroy的相关代码。github

github连接：user-gold-cdn.xitu.io/2019/3/7/16…，欢迎👏👏👏starnpm