生命周期：是指一个组件创建到销毁的过程。
生命周期又叫生命周期钩子函数

<script>

  import Home from "./components/home";

  export default {
    name: 'App',
    components: {
      Home
    },
    beforeCreate:function () {
      console.log("创建前");
    },
    created:function () {
      console.log("创建后");
    },
    beforeMount:function () {
      console.log("挂载前");
    },
    mounted:function () {
      console.log("挂载后");
    },
    beforeUpdate:function () {
      console.log("更新前");
    },
    updated:function () {
      console.log("更新后");
    },
    beforeDestroy:function () {
      console.log("销毁前");
    },
    destroyed:function () {
      console.log("销毁后");
    }

  }
</script>

---

beforeCreate：创建前

当前生命周期主要做一些初始化的工作，我们可以创建一个loading。

---

created：创建后

1、在当前生命周期函数中我们可以访问到vm身上所有的属性和方法

2、当前生命周期函数中会将data和methods中的所有属性和方法挂载到new Vue的实例上

3、当前生命周期函数中会将data中的属性添加一个getter和setter的方法，当进行前后端交互时，数据可以进行动态的改变。因此如果需要进行

前后端数据交互的时候必须在当前生命周期中进行(响应式原理)

---

beforeMount：挂载前

1、在当前生命周期中我们可以进行数据的最后的修改

2、当前生命周期中发访问不到真是的DOM

---

mounted：挂载后

1、数据与模板结合，在这个生命周期中我们可以用this.$refs访问到真实的DOM结构

---

beforeUpdate：更新前

当data中的数据发生了改变的时候就会执行

1、可以访问到真实的DOM结构

2、可以对数据做最后的修改

3、当前生命周期中的数据和模板还没有更新

---

updated：更新后

1、数据更新后最新的DOM结构

2、在当前生命周期中我们要特别注意，因为当前函数是一个频繁触发的函数。

因此如果在当前的生命周期函数中做一些事件的绑定或者实例化的时候需要做一个提前判断

---

beforeDestroy：销毁前

1、在当前生命周期中，还可以访问到真是的DOM结构以及data中的数据

2、一般在这个周期我们会做一些事件的解绑/移除

---

destroyed：销毁后

1、将DOM和数据之前的关联断开
　　　　　　　　　　　
2、在当前的生命周期函数中是访问不到真实的DOM结构的

---

PS：https://www.cnblogs.com/tong-yao/p/10562657.html
我所写的是从这个网站上参照的，但是，在写的过程中我发现他里面把 created 写成 create（错误的） 少了一个 d ，导致我测试的半天才发现；
还有一个是把 beforeUpdate 写成了 beforeUpdata（错误的） 写错了最后一个字母 e，希望那个博主看到能把错误修改了，不然容易误导人