VUE生命周期详解

VUE2生命周期图

 首先上一张图这是VUE的官方文档中生命周期的流程图

 下面我们来进行一下测试，测试代码如下：

注：因为DOM的操作的成本很高、很慢虽然之后出现jQuery这样十分方便的选择器方便我们操作DOM但是聪明的程序员不仅仅满足这样的方式，这时便出现了MVVM的框架，我们可以使用数据驱动视图变化，我们无需去操作DOM只要数据变化了，DOM视图会自动取刷新，这样大大提高了效率，虚拟DOM其实就是一种用Js去模拟DOM的一种方式，如果数据更新先去操作虚拟DOM最后再创建成真实的DOM节点。详情原理请参看这边文章：http://www.ituring.com.cn/article/211352。

由上图可知：
　　1、beforeCreate 此时$el、number的值都为undefined
　　2、创建之后，此时可以拿到number的值，但是$el依旧为undefined
　　3、mount之前，$el的值为“虚拟”的元素节点
　　4、mount之后，mounted之前，“虚拟”的dom节点被真实的dom节点替换，并将其插入到dom树中，于是在触发mounted时，可以获取到$el为真实的dom元素()
　　myVue.$el===document.getElementById("app")// true

接着，在input中更新number的值由1到2

销毁前和销毁后都会触发相应的钩子，不过此时$el依旧存在，最后number销毁之后为undefined.

注：这里还有一个钩子函数未说到那就是activited针对keep-alive标签，使用keep-alive在单页中前进后退只触发activited