生命周期先上图

什么是生命周期
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。

再上图，对生命周期图的标注

特别值得注意的是created钩子函数和mounted钩子函数的区别

每个钩子函数都在啥时间触发

beforeCreate

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created
实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

beforeUpdate
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

实例
App.vue

<template>
  <div id="app">
    <h1>{{ msg }}</h1>

    <!-- 3.在模板中使用 -->
    <v-home></v-home>
    <br>

  </div>
</template>

<script>
/*
生命周期函数/钩子：
组件挂载、组件更新、组件销毁触发的一系列方法 这些 方法叫做生命周期函数

*/
//1.引入组件
import Home from './components/Home.vue';

export default {
  name: 'app',
  data () {
    return {
      msg: '我是一个根组件'
    }
  },
  //2.挂载组件
  components:{//前面的组件名称不能和html一样
    'v-home':Home,
  },
  mounted(){
    console.log("我是一个生命周期函数");
  }
}
</script>

<style lang="scss">

</style>

Home.vue

<!-- 创建一个组件 -->
<template>
  <!-- 所有的内容要被根节点包含起来 -->
   <div>
     <v-header></v-header>
     <hr>

    <br>
    <v-life v-if="flag"></v-life>

    <br>
    <button @click="flag=!flag">挂载以及卸载life</button>

   </div>
</template>

<script>
//引入头部组件
import Header from './Header.vue';

import Life from './life.vue';


export default {
   data() {
       return {
         msg:'我是一个首页组件!!!',
         flag:true
       }
   },
   methods:{
     run(){
       alert(this.msg);
     }
   },
  components: {
    'v-header':Header,
    'v-life':Life,
  }
}
</script>

<style scoped lang="scss">
/*css scoped 局部作用域 */
  h2{
    color:red,
  }
</style>

Header.vue

<template>
   <div>
     <h2 class="header">头部组件</h2>


   </div>
</template>

<script>
export default {
   data() {
       return {
         msg:'我是一个头部组件',
       }
   },
  components: {}
}
</script>

<style scoped lang="scss">
  .header{
    background: #3944e6;
    color: red;
  }
</style>

Life.vue

<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="life">

          生命周期函数的演示    ---{{msg}}

        <br>
          <button @click="setMsg()">执行方法改变msg</button>
    </div>

</template>


<script>

/*

  生命周期函数/生命周期钩子：

    组件挂载、以及组件更新、组件销毁、的时候触发的一系列的方法  这些方法就叫做生命周期函数

    mounted和beforeDestroy比较重要
*/
    export default{

        data(){

            return{

                msg:'msg111'
            }
        },
        methods:{
            setMsg(){
                this.msg="我是改变后的数据"
            }

        },
        //从上到下有顺序要求
        beforeCreate(){
            console.log('实例刚刚被创建1');
        },
        created(){
            console.log('实例已经创建完成2');
        },
        beforeMount(){
            console.log('模板编译之前3');
        },
        mounted(){     /*请求数据，操作dom , 放在这个里面  mounted*/
            console.log('模板编译完成4');
        },
        beforeUpdate(){
            console.log('数据更新之前');
        },
        updated(){
            console.log('数据更新完毕');
        },
        beforeDestroy(){   /*页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数*/
            console.log('实例销毁之前');
        },
        destroyed(){
            console.log('实例销毁完成');
        }


    }
</script>

运行截图：

点击 执行方法改变msg 按钮：

点击 挂载。。 按钮：