定义：
一个Vue实例从开始创建一直到销毁的整个过程，称之为生命周期
作用：
Vue框架的内置函数，随着组件的生命周期阶段的不同，会自动执行的函数，并且在特定的阶段做某件事，只需要调用相应的钩子函数即可。
我们可以通过使用生命周期（钩子）函数来判断Vue生命周期到达了什么阶段。
生命周期是什么？
生命周期分为4个阶段，8个方法。Vue生命周期过程中，会自动运行一些函数，被称为生命周期钩子，让开发者在特定的阶段可以运行自己的代码。如图：
beforeCreate：创建之前； created：创建之后
beforeMount：挂载之前； mounted：挂载之后
beforeUpdate：更新之前； updated：更新之后
beforeDestroy：销毁之前； destroyed：销毁之后
初始化阶段：
准备响应式数据，进行数据的响应式处理，经过创建阶段，该数据就变为了响应式数据。
挂载阶段：
webpack打包，挂载，简而言之就是渲染模板的阶段，在页面当中可以看到我们所编写的相应结构
更新阶段：
与页面进行交互的时候，进行数据的修改和视图的更新，不同于初始化阶段和挂载阶段，这个阶段会进入到一个循环，进行反复的修改和更新。
销毁阶段：
进行实例的销毁，不用的组件进行释放
八个钩子：
<script>
const app = new Vue(
{
el: '#app',
data:{
name: '橙子味热果汁'
},
beforeCreate(){
console.log('初始化之前');
},
created(){
console.log('初始化之后');
},
beforeMount(){
console.log('挂载之前');
},
mounted(){
console.log('挂载之后');
},
beforeUpdate(){
console.log('更新之前');
},
updated(){
console.log('更新之后');
},
beforeDestroy(){
console.log('销毁之前');
},
destroyed(){
console.log('销毁之后');
}
}
)
</script>八个钩子详解：
beforeCreate：
初始化事件、生命周期等，但数据的代理还未开始。此时无法通过Vm访问到data中的数据、method当中的方法
const app = new Vue(
{
el: '#app',
data:{
name: '橙子味热果汁'
},
beforeCreate(){
console.log(this.name);
},
}
)
因为响应式数据还未准备，没有被注入数据，所以控制台输出结果为undefined
created：
可以通过Vm访问到data当中的数据、methods当中配置的方法，发送初始化渲染的请求。注：在创建阶段结束后，vue开始解析模板，生成虚拟的Dom（内存当中），但页面还不能显示出来解析好的内容。
DOM（document object model文档对象模型，选中html标签，进行操作或获取数值）
beforeCreate(){
console.log(this.name);
},
created(){
console.log(this.name);
},
在浏览器的控制台获取到的name，beforeCreated没有获取到data中的数据，而created阶段获取到了data中的数据
在这里解释一下为什么用this：
在Vue的生命周期中，对于普通函数，this指的是直接的调用者，如果没有直接调用者，this指的是window；另外的箭头函数是没有自己的this，在它内部使用的this是由它定义的对象决定的。
beforeMount：
此时页面呈现的是未经Vue编译的Dom结构，所有对Dom的操作最终都是不奏效的，可以在这里做初始数据的获取
<body>
<div id="app">
<!-- <p @click="reduce">-</p> -->
<h1>{
{ name }}</h1>
<p>+</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue(
{
el: '#app',
data:{
name: '橙子味热果汁'
},
beforeMount(){
console.log(document.querySelector('h1').innerHTML);
},
</script> 
mounted
在beforeMount-mounted阶段会将内存中的虚拟DOM转为真实的DOM插入页面。此时页面会显示经过Vue编译的DOM，对DOM的操作均有效，至此初始化过程结束。一般会在此进行开始定时器、绑定自定义的事件等初始化操作
注：用了Vue就尽量少操作Dom
beforeMount(){
console.log(document.querySelector('h1').innerHTML);
},
mounted(){
console.log(document.querySelector('h1').innerHTML);
},
从中获取h1里面的内容，在浏览器的控制台里展示出来，可以看到before里面仍然是name，并没有进行挂载操作，在mounted输出的则是在data里面定义的name：“橙子味热果汁”
这里做一个created与mounted去请求数据的区别：
一般来说用created的比较多，created是在渲染之前进行调用，通常先初始化属性，然后再做渲染；mounted是在模板渲染完成后，一般都是初始化页面之后，再对元素节点进行操作，在这里请求数据就可能会出现不规则闪动问题。
在请求数据的数据对DOM有影响就用created；请求数据与DOM无关用mounted。
注：在运行周期函数的时候，一般情况下只会进行初始化阶段和挂载阶段
beforeUpdate
与页面进行交互，修改数据的时候进行触发，此时数据是新的，但是页面是旧的，即：页面还没有和数据保持同步
在这里可以用一个计数器来表示出来
<body>
<div id="app">
<span style="font-size: 50px;">{
{ count }}</span>
<button @click="count++">点我加1</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue(
{
el: '#app',
data:{
count: 1
},
beforeUpdate(){
console.log('更新之前',document.querySelector('span').innerHTML);
},
</script>
可以看到点击了一次按钮，数据修改了，而视图还没有更新，这就是beforeUpdate
updated
根据新数据，生成新的虚拟DOM，随后与旧的DOM进行比较，最终完成了页面的更新，数据进行了修改，并且视图也进行了更新。即：页面与数据保持了同步
beforeUpdate(){
console.log('更新之前',document.querySelector('span').innerHTML);
},
updated(){
console.log('更新之后',document.querySelector('span').innerHTML);
},
beforeDestroy
VM中的所有指令都处于可用状态，马上要执行销毁过程，一般在此阶段，释放vue以外的资源，例如关闭定时器等收尾操作
destroyed
所有的事件监听，所有跟vue相关的绑定，全部都进行了销毁，相当于这个DOM的结构跟Vue无关了
在控制台进行了销毁阶段，app.$destroy(),我们这个DOM关于点击加1的功能就不能用了。我们可以自行实现一下这段代码，
<body>
<div id="app">
<span style="font-size: 50px;">{
{ count }}</span>
<button @click="count++">点我加1</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue(
{
el: '#app',
data:{
count: 1
},
beforeUpdate(){
console.log('更新之前',document.querySelector('span').innerHTML);
},
updated(){
console.log('更新之后',document.querySelector('span').innerHTML);
},
beforeDestroy(){
console.log('销毁之前');
},
destroyed(){
console.log('销毁之后');
}
}
)
</script>