Vue的生命周期钩子函数理解

附图

生命周期其实言外之意呢，就是一个组件从创建开始到结束为止的这个过程，为什么要学习这个生命周期呢？如果只是要单纯的实现这个vue中的简单语法的话，是能够可以实现应用的一个想法，但是不过一旦发生问题的话，我们是有必要需要借助于生命周期去寻找问题，甚至需要利用生命周期的情况来确定我们的业务需求写在哪里？
我目前学习了解生命周期的两个原因呢，就是寻找问题（找错误）和解决需求

接下来谈一下我所理解的生命周期
1、生命周期呢，涉及的函数主要是图中标红的部分,也就是生命周期的钩子函数，一般我们能用到的主要是：

1. beforeCreate：
   实际上 new Vue()呢是实例化我们的对象，在没有实例化的时候，也就是在没有创建这个对象之前，我们就会拥有一个方法beforeCreate()，也就是说在还没有创建出这个对象出来，我们可以调用这个方法，可以对当前的这个事件作一些配置，以及当前的这个属性data（），还没有真正的被识别，也就是Vue这个对象还没有真正诞生的时候，那么我们这个时候可以什么事情呢？
   一般呢，可以做一个数据加载的动画，比如说想让页面加载等，然后我们进入第二个方法created
2. created：
   在进入created方法的这个时候，这个实例已经创建出来了，组件也被创建好了，我们的这个属性也成功的被绑定了，但是我们这个DOM还没有生成，因为我们还没有进入到下一个方法，而且element这个属性还没存在。
   那我们一般在这个方法做什么呢？
   （1）一般呢，我们可以在这个方法里面获取一些数据，比如我们请求这个网络的接口，请求到数据，一般把这个数据赋值给我们的属性，然后再往下走的时候呢，就可以展示到DOM了。
   （2）还可以在这个方法中结束上一个方法的加载事件（loading加载结束掉，准备渲染DOM）
   这个方法创建之后呢，这个页面呢还没有展现出来。继续呢往下走：
   首先看一下是否有“el”这个属性，也就是element，这个在哪里呢，也就是在new Vue里的这个el属性，如果有，则检查是否有template这个选项，如果没有呢？会检查是否有.$mount("#app")，有这个也可以，如果都没有的话，则当前的这个生命周期就结束了。如果有一个的话，我们就可以到达我们的下一步，我们这个template就会执行一个具体的组件，也就是App.vue,当有这个组件的话，就会执行一个render方法，就会渲染这个组件，也就是2中的内容

1、new Vue({
el: "#app",
template:"<App/>",
router,
store,
render: h => h(App)
}).$mount("#app");

2、<template>
<div id="app">
<router-view/>
</div>
</template>

1. beforeMount：
   mount是挂载的意思，beforeMount就是要开始编译当前的模版了，也就是template里面的内容可以编译了，这个是在虚拟DOM中执行这个方法的，当前还不能看到这个模版，他只是将这个东西挂载，但是还没有挂载上去，没有将真实的内容渲染到页面上，可以在这个方法上做一些具体的工作，这个根据需求而定，执行完这个，接下来就可以执行mount函数

2. mounted：
   模版编译完了，开始挂载，这个方法一旦结束，页面就会显示出来了，如果有一些东西在页面显示出来以后，再操作的话，就可以在这个方法中执行，DOM生成，然后就可以看到对应的内容，看到展示的内容之后呢，我们可以对这个项目做一下增删改查了

3. beforeUpdate：
   是组件在更新之前需要调用的一个钩子函数

4. updated：

5. beforeDestroy:
   生命周期的尾部，

6. destroyed
   通过上图，可以对Vue钩子函数作一个简单的了解

PS：
1、一个vue项目只new Vue一次，通常是在main.js里，这次实例化的Vue对象是根组件，其他的子组件都是通过配置文件的方式一层一层的叠加上的，通过vue组件配置进行叠加的子组件，其实是vue的一种省略机制，它避免了你每次都去实例化子组件。

vue-cli生成的项目脚手架里，通过webpack配置很好的处理了这些问题，每个单文件组件 *。vue js输出的就是一份配置，就足够了，最终他们都会汇总到app.vue，app.vue再在main.js里实例化，也就是说这套脚手架里面只有一个实例化对象。
2、.vue文件中 export default 后面的对象 就相当于 new Vue() 构造函数中的接受的对象