什么是生命周期？

从vue实例创建，运行，到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。
生命周期钩子:就是生命周期事件的别名而已。

主要的生命周期分类：

1.创建其间的生命周期函数：
- beforeCreate()：实例刚在内存中被创建出来，还没有初始好data和methods属性
- created()：实例已经在内存中创建好，data和methods已经创建好，但没有开始编译模板
- beforeMount()：此时已经完成了模板的编译，但还没有挂载到页面中，
- mount()：已经将编译好的模板挂载到了页面指定的容器中显示。
2.运行期间的生命周期函数：
- beforeUpdate()：状态更新之前执行此函数，data里的值是最新的，但是页面上的数据还是旧的。此时还没有开始重新渲染DOM节点。
- updated()：实例更新完毕后调用此函数，data中的值和页面上的值都已经完成了更新
3.销毁期间的生命周期函数：
- beforeDestroy()：实例销毁之前调用，在此之前，实例都还是可用的
- destroyed()：Vue实例销毁之后调用。调用后，Vue实例指示的所有东西都会解除绑定，所有的事件监听器都会被移除，所有的子实例都会被销毁。

图片一

图片二

图片三

图片四

销毁

<!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">
  <title>vue实例的生命周期</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
</head>
<body>
  <div id="app">
    <input type="button" value="改变msg" @click="msg = 'No'">
    <p id="p">{{ msg }}</p>
  </div>
</body>
</html>
<script>
new Vue({
  el: "#app",
  data:{
    msg:"123"
  },
  methods:{
    show(){
      console.log("执行了show方法");
    }
  },
  beforeCreate() {
    //在这里面，data 和 methods 中的数据都还没有被初始化
    // console.log(this.msg);//undefined
    // this.show();//报错不是一个function
  },
  created() {
    //能正常运行
    //如果需要操作data里的数据或者是调用methhods里的方法，最早只能在这里面
    console.log(this.msg);
    this.show();
  },
  beforeMount(){
    console.log(document.getElementById("p").innerText);//{{ msg }}
  },
  mounted() {
    //是实例创建期间的最后一个函数，当执行完它后，就表示实例已经被完全创建好了，此时如果没有其他操作的话，实例就在内存中一动不动
    console.log(document.getElementById("p").innerText);//123
  },
  //运行中的两个事件
  beforeUpdate() {
    //页面没有被更新，但data里的数据改变了
    console.log("页面元素中的数据", document.getElementById("p").innerText);//页面元素中的数据 123
    console.log("data里的数据",this.msg);//data里的数据 No
  },
  updated(){
    console.log("页面元素中的数据", document.getElementById("p").innerText);//页面元素中的数据 No
    console.log("data里的数据",this.msg);//data里的数据 No
  }
});
</script>