Vue 生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后

主要用到的是created函数（操作数据）和mounted函数（操作Dom）

BeforeCreated函数：

      在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。无法访问到数据和真实的dom

created函数：

     在created阶段，vue实例的数据对象data有了，挂载元素el还没有。还没有真实的DOM

 如果：数据的初始值就来自于后端，可以发送ajax，或者fetch请求获取数据，但是，此时不会触发updated函数

 beforeMonute函数：

在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载为虚拟的dom节点

此时 this.$el有值，但是数据还没有挂载到页面上。即此时页面中的{{}}还没有被替换

当渲染好的页面元素被挂载到页面之前调用（拿不到有数据的DOM，指令什么样，拿到的还是原样的，并未解析），直白话：在这个阶段已经创建出html，可以拿到页面的dom，但是vm指令还未被解析，插值表达式并不会被解析<div>{{msg}}</div>，这个时候数据和指令还未结合

 

mounted函数：

DOM 渲染完成（模板编译完成），数据挂载完毕

 

即：此时已经把数据依据挂载到了页面上，所以，页面上能够看到正确的数据了。

beforeUpdate函数：

组件更新之前执行的函数

数据更新了，但是，vue（组件）对象对应的dom中的内部（innerHTML）没有变，所以叫作组件更新前

当有数据发生变化，但dom还未更新之前调用，此时如果访问dom，拿到的内容还是旧内容(页面上DOM中的内容发生了改变，beforeUpdate并不会立即更新)

 

updated函数：

当有数据发生变化，dom也更新完成之后调用，此时如果访问dom，拿到的就是新内容了(页面上DOM中的内容发生了变化，updated拿到的更新后的内容)

beforeDestroy函数：

立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等

destroyed函数：

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 

（3）、第一次页面加载会触发哪几个钩子

答：第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

（4）、DOM 渲染在哪个周期中就已经完成

答：DOM 渲染在 mounted 中就已经完成了。