Vue的生命周期
vue的生命周期，主要经历了如下几个阶段，分别是 beforeCreate，created，beforeMount，mounted，beforeUpdate，update，beforeDestroy，destroy ，主要由这四对八个组成
主要分为四个流程，创建流程，挂载流程，更新流程和销毁流程
整个Vue的生命周期原理图如下：
1. 创建流程
创建流程分为beforeCreate和created两个阶段，注意此时创建的并不是vm，而是创建的数据监测和数据代理，如图所示：
1.1 beforeCreate阶段
创建完这个Vue实例之后，首先会进入一个初始化阶段，此阶段初始化生命周期和事件，在此阶段，数据代理还并没有开始。在初始化阶段之后，就会经历vue的 beforeCreate 阶段。
下面是我的Vue代码：
此时看浏览器的控制台并观察页面：
由于数据代理并未初始化，因此这个阶段是拿不到vm对象以及_data数据的，因此在第一个 beforeCreate 阶段中，无法通过这个vm对象访到data中的数据和methods中方法。并且是没有 _data 的，并且也没有data数据中的x 值，也没有add方法，前端页面的数据也不会进行编译解析
1.2 created阶段
在此阶段，还是处于一个初始化阶段，即init Injections & reactivity 阶段。该阶段就是初始化这个数据监测和数据代理的，这样就可以获取到代理对象并解析模板，对created进行debugger得到如下结果：
在初始化代理对象之后，就可以进入这个 created 阶段了。通过结果可以得知已经可以加载这个_data对象，由于初始化了这个数据监测，所以这个 get和set的两个方法也有了，由于初始化了这个数据代理，因此这个data中的x和method中的add都可以加载成功，注意此时是可以通过vm对象获取到 data 中的属性和method 中的方法的。
2. 挂载流程
创建流程之后，还会有一个阶段来解析这个Vue模版，即开始解析模板，生成虚拟DOM到内存中，此时页面还不能显示好解析的内容，即还没有转成真实DOM，然后进行beforeMount和mounted两个挂载流程阶段
2.1 beforeMount阶段
执行到这这个 beforeMount 的时候，对应的页面是并没有进行解析的，可以确认beforeMount函数中的DOM元素是未经过Vue编译的，所有对Dom的操作都是不奏效的。其实这个DOM元素是Vue已经解析完成的真实DOM，但是此时的vue还没来的及将这些DOM向页面中存放，对beforeMount进行debugger，可以观察到：
可以发现页面上的值是原生的html，并不是经历过vue模板解析的值，因此可以得知上面还没有vue解析出来的DOM，同时也可以证明此时vue还没有来得及将编译的DOM存到页面中
2.2 mounted阶段
在 beforeMount 阶段之后，Vue会将el中的数据存放在 $el 上，类似于做一个副本，此时会将内存中的虚拟DOM转化为真实DOM存在页面中。在将真实的DOM插入页面之后，Vue就会开始调用这个 mounted 挂载函数。页面中已经呈现的是经过Vue编译的DOM，因此在这个函数中对DOM的操作均有效，在mounted函数中进行debugger可以观察到：
可以得知：在挂载阶段DOM元素已经是全部经过Vue解析的，因此展示在页面的值都是解析后的值，并且在这个阶段也可以有效的操作DOM元素。
在mounted函数中，一般会进行这些操作：开启定时器，发送网络请求，订阅消息，绑定自定义事件等操作
3. 更新流程