vue组件及子组件的生命周期

6,285 阅读7分钟

生命周期

  • 什么是生命周期?

一个实例从创建到销毁的一个过程。

  • vue初始化做了什么?

创建vue实例后,调用init方法,做了以下事情:

    // 初始化生命周期
    // 
    initLifecycle(vm)

    // 初始化事件中心
    initEvents(vm)

    // 初始化渲染
    initRender(vm)
    callHook(vm, 'beforeCreate')

    // 初始化注入
    initInjections(vm) // resolve injections before data/props

    // 初始化状态
    // 初始化 props、data、methods、watch、computed 等属性
    initState(vm)

    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')
    
    // 在初始化最后,如果检测到有el属性,则调用函数挂载vm
    if (vm.$options.el) {
      vm.$mount(vm.$options.el);
    }
  • 有哪些生命周期?分别做了什么?生命周期的执行过程?

--> 首先创建一个vue实例,Vue(),然后执行初始化init()函数,初始化生命周期、事件中心、渲染;

--> 然后调用beforeCreate:这里拿不到任何数据,数据观察(dataobserver)和事件配置(event/watcher)都没有准备好,没有数据,没有dom

--> 初始化data数据,实现监听,初始化vue内部事件,进行属性和方法的计算。

--> 初始化完成,调用created:这里可以调用methods中的方法,修改data数据, 并且可触发computed重新计算,watch变更等。但是dom还没有挂载,无法访问$el。

--> 然后进行模板编译:将data的数据,和vue的模板语法编译成html,这里会分两种情况,1.是实例内部有模板属性,直接调用,然后用render函数渲染,2.是没有模板属性调用外部html

--> 模板编译完成后,调用beforeMount:这里也可以拿到data数据,可以拿到el,且成功关联到了dom,但是此时的data,并没有渲染到页面中。

--> 然后执行render函数,将渲染的内容挂载到dom节点上

--> 挂载完毕,调用mounted:在这里,dom挂载完毕,data也已经渲染到页面中。mounted仅执行一次。

--> 数据发生变化,调用beforeUpdate:当检测到我们要修改数据的时候,就会触发beforeUpdate的钩子

--> 然后Vue会利用diff算法重新比较新的虚拟dom和旧的虚拟dom,对页面重新渲染。

--> 更新完成,执行updated:当修改vue的data时,vue会自动帮我们更新渲染视图,此时页面上是最新的数据,

避免在这期间更改状态,可能会导致无限循环 钩子不常用,一般用computed,watch

--> 在销毁之前触发,beforeDestroy:所有实例都可以用

--> 然后解除绑定,销毁子组件,事件监听器

--> 销毁完毕,调用destroyed:销毁之后,所有的事件监听器会被移除,所有的子实例也都会被销毁

子组件的生命周期

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue 实例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src='js/jquery.min.js'></script>
</head>
<body>
<div id="app">
  <v-sss></v-sss>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      name:0
      // someName:'zheli',
    },
    components:{
      'v-sss':{
        'template':`<div>子组件</div>`,
        beforeCreate(){
          console.log('子-->beforeCreate')
        },
        created() {
          console.log('子-->created')
        },
        beforeMount(){
          console.log('子-->beforeMount')
        },
        mounted(){
          console.log('子-->mounted')
        },
        beforeUpdate(){
          console.log('子-->beforeUpdate')
        },
        updated(){
          console.log('子-->updated')
        },
        beforeDestroy(){
          console.log('子-->beforeDestroy')
        },
        destroyed(){
          console.log('子-->destroyed')
        }
      }
    },
    beforeCreate(){
      console.log('父-->beforeCreate')
    },
    created() {
      console.log('父-->created')
    },
    beforeMount(){
      console.log('父-->beforeMount')
    },
    mounted(){
      console.log('父-->mounted')
    },
    beforeUpdate(){
      console.log('父-->beforeUpdate')
    },
    updated(){
      console.log('父-->updated')
    },
    beforeDestroy(){
      console.log('父-->beforeDestroy')
    },
    destroyed(){
      console.log('父-->destroyed')
    }
  })
</script>
</body>
</html>
  • 没有显示和隐藏的情况下
第一种情况:

父 --> beforeCreate

父 --> created

父 --> beforemount
 
    子 --> beforeCreate
 
    子 --> created
 
    子 --> beforeMount
    
    子 --> mounted
 
父 --> mounted
 
  • 有v-if控制子组件的显示和隐藏。

    • v-if初始值为true,顺序同第一种情况
    • v-if初始值为false,且一直不为true,子组件的生命周期不会触发。
    • v-if初始值为false,在父组件的(created,beforeMount)生命周期变为true时,顺序同第一种情况
    • v-if初始值为false,在父组件的(mounted)生命周期将变为true时,顺序如下:
第二种情况:

父 --> beforeCreate

父 --> created

父 --> beforemount

父 --> mounted

父 --> beforeUpdate
 
    子 --> beforeCreate
 
    子 --> created
 
    子 --> beforeMount
    
    子 --> mounted

父 --> updated

  • 有v-show控制子组件的显示和隐藏。

    • v-show初始值为true,顺序同第一种情况。
    • v-show初始值为false,且一直不为true,顺序同第一种情况。
    • v-show初始值为false,在父组件的(created,beforeMount)生命周期变为true时,顺序同第一种情况。
    • v-show初始值为false,在父组件的(mounted)生命周期将变为true时,顺序如下:
第三种情况

父 --> beforeCreate

父 --> created

父 --> beforemount

    子 --> beforeCreate
 
    子 --> created
 
    子 --> beforeMount
    
    子 --> mounted

父 --> mounted

父 --> beforeUpdate

父 --> updated

孙组件的生命周期

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue 实例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src='js/jquery.min.js'></script>
</head>
<body>
<div id="app">
  <v-sss v-show="isActive"></v-sss>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data() {
      return {
        isActive:false
        // someName:'zheli',
      }
    },
    components:{
      'v-sss':{
        'template':`<div>子组件<v-sonson></v-sonson></div>`,
        components:{
          'v-sonson':{
            'template':`<div>孙儿组件</div>`,
            beforeCreate(){
              console.log('孙-->beforeCreate')
            },
            created() {
              console.log('孙-->created')
            },
            beforeMount(){
              console.log('孙-->beforeMount')
            },
            mounted(){
              console.log('孙-->mounted')
            },
            beforeUpdate(){
              console.log('孙-->beforeUpdate')
            },
            updated(){
              console.log('孙-->updated')
            },
            beforeDestroy(){
              console.log('孙-->beforeDestroy')
            },
            destroyed(){
              console.log('孙-->destroyed')
            }
          }
        },
        beforeCreate(){
          console.log('子-->beforeCreate')
        },
        created() {
          console.log('子-->created')
        },
        beforeMount(){
          console.log('子-->beforeMount')
        },
        mounted(){
          console.log('子-->mounted')
        },
        beforeUpdate(){
          console.log('子-->beforeUpdate')
        },
        updated(){
          console.log('子-->updated')
        },
        beforeDestroy(){
          console.log('子-->beforeDestroy')
        },
        destroyed(){
          console.log('子-->destroyed')
        }
      }
    },
    beforeCreate(){
      console.log('父-->beforeCreate')
    },
    created() {

      console.log('父-->created')
    },
    beforeMount(){
      console.log('父-->beforeMount')
    },
    mounted(){
      console.log('父-->mounted')
      this.isActive = true
    },
    beforeUpdate(){
      console.log('父-->beforeUpdate')
    },
    updated(){
      console.log('父-->updated')
    },
    beforeDestroy(){
      console.log('父-->beforeDestroy')
    },
    destroyed(){
      console.log('父-->destroyed')
    }
  })
</script>
</body>
</html>
  • 没有显示和隐藏的情况下,子组件和孙组件都不隐藏
第一种情况:

父 --> beforeCreate

父 --> created

父 --> beforemount
 
    子 --> beforeCreate
 
    子 --> created
 
    子 --> beforeMount
    
        孙 --> beforeCreate
 
        孙 --> created
 
        孙 --> beforeMount
        
        孙 --> mounted
        
    子 --> mounted
 
父 --> mounted
 
  • 子组件由v-if控制,孙组件无控制

    • v-if初始值为true,顺序同第一种情况
    • v-if初始值为false,且一直不为true,子组件和孙组件的生命周期不会触发。
    • v-if初始值为false,在父组件的(created,beforeMount)生命周期变为true时,顺序同第一种情况。
    • v-if初始值为false,在父组件的(mounted)生命周期将变为true时,顺序如下:
第二种情况:

父 --> beforeCreate

父 --> created

父 --> beforemount

父 --> mounted

父 --> beforeUpdate
 
    子 --> beforeCreate
 
    子 --> created
 
    子 --> beforeMount
    
            孙 --> beforeCreate
 
            孙 --> created
 
            孙 --> beforeMount
         
            孙 --> mounted
    
    子 --> mounted

父 --> updated

  • 子组件由v-show控制,孙组件无控制。

    • v-show初始值为true,顺序同第一种情况。
    • v-show初始值为false,且一直不为true,顺序同第一种情况。
    • v-show初始值为false,在父组件的(created,beforeMount)生命周期变为true时,顺序同第一种情况。
    • v-show初始值为false,在父组件的(mounted)生命周期将变为true时,顺序如下:
第三种情况

父 --> beforeCreate

父 --> created

父 --> beforemount

    子 --> beforeCreate
 
    子 --> created
 
    子 --> beforeMount

            孙 --> beforeCreate
 
            孙 --> created
 
            孙 --> beforeMount
         
            孙 --> mounted
    
    子 --> mounted

父 --> mounted

父 --> beforeUpdate

父 --> updated

其实从上面看,就可以总结出来子孙组件的生命周期。

  • 如果子组件被v-if控制,且初始值为false,那么子组件一开始就不会被渲染,没有执行生命周期。

  • 如果子组件被v-if控制,且初始值为true,或者子组件被v-show控制,不论初始值,或者,子组件在父组件的created,beforemount阶段显示值为true,那么,子组件总是会在父组件beforemount之后开始执行生命周期。

  • 如果子组件在父组件的mounted阶段被渲染出来,这里会分两种情况,

    • 第一种是v-show,因为v-show无论为true还是false,它都会存在dom节点,在父组件生命周期的beforemount之后,子组件已经开始执行自己的生命周期,直到父组件mounted阶段之后,这一轮生命周期已经完成,data已经有了,页面也已经渲染完毕。所以,当v-show的子组件变为true显示后,会触发父组件的更新函数。

    • 第二种是v-if,因为v-if如果为false,是不会存在节点的,也就一开始不会显示,也就不会执行生命周期,所以,当v-if的子组件被渲染显示后,也会触发父组件的更新函数,不同的是,v-if子组件会在父组件的beforeupdate之后开始执行它的生命周期。

引申提问:

  • Vue的beforeCreate钩子函数意义在哪里?我们可以在里面实现哪些特殊效果?

1.可以加载一些在页面渲染前出现的内容,比如loading动画

2.可以做页面拦截,和重定向。