vue的生命周期（钩子函数）

一、什么是生命周期

每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。

生命周期的全过程

 二、八个生命周期（钩子函数）

钩子函数	作用
beforeCreate	创建vue实例之前执行，data中的数据都获取不到
created	创建实例成功，可以在这里进行数据的请求，获取变量
beforeMount	渲染DOM之前，虚拟DOM挂载到真实的DOM，但是获取不到DOM元素
mounted	渲染DOM完成，可以获取DOM元素，可以进行DOM操作
beforeUpdate	修改了变量，data数据更新了，但是页面并未和最新的数据保持同步
updated	data数据为最新的，页面也是最新的
beforeDestroy	销毁vue实例之前，并没有销毁，解除了挂载
destroyed	销毁vue实例，解除了事件监听以及和DOM的绑定

 1、beforeCreate

        //在这里边是拿不到data中的name值，也获取不到DOM元素，不能操作DOM元素
      beforeCreate(){
        console.log('创建实例之前',this.name); // 创建实例之前 undefined
        console.log(document.querySelector('h2')) // null 
      },

2、created

        //实例初始化之后，可以拿到data中的数据，但是不能操作DOM
        //可以在created中发送请求
      created(){
        console.log('创建实例之后',this.name); // 创建实例之后 张三
        console.log(document.querySelector('h2')) // null
      },

3、beforeMount

    //可以获取data中的数据，但是不能操作DOM元素
    beforeMount(){
        console.log('实例挂载之前',this.name); // 实例挂载之前 张三
        console.log(document.querySelector('h2')) // null
    }

4、mounted

    //可以获取data数据，可以操作DOM元素
    //虚拟DOM替换成了真实的DOM
     mounted(){
        console.log('实例挂载之后',this.name); // 创建实例之后 张三
        console.log(document.querySelector('h2')) //打印出h2标签
     }
    

打印结果： 

 5、beforeUpdate

 // 更新数据之前执行
  beforeUpdate(){
    console.log('实例更新之前',)
  },

6、updated

  // 数据更新，虚拟的DOM更新，然后更新真实的DOM；最后触发这个函数
   updated(){
    console.log('实例更新之后');
  },

7、beforeDestroy

   //清除定时器，解绑绑定事件
    beforeDestroy(){
       console.log('实例销毁之前');
    },

8、destroyed

   // 销毁子组件，清除定时器，事件监听
   // 元素的事件还在，但是更改数据不会再让视图进行更新了
  destroyed(){
    console.log('实例销毁之后');
  }