vue 生命周期详细分析

new vue({})
1.Init events&lifecycle //只有默认的一些生命周期和默认的事件，此时的data，methods，el等等都不存在，还没有初始 化数据
什么是事件？什么是生命周期？vue api文档中事件有（on、once、off、emit四个方法），生命周期有（mount、forceUpdate、nextTick、destroy四个方法，其他那么多生命周期钩子应该也在这初始化的，要不然下一步的beforeCreate是哪里来的）

2.beforeCreate() //钩子函数运行，但是此时的vue是一个空壳。我们尝试使用beforeCreate函数输出data和methods中的数据是空的

初始化数据阶段
3.init injections&reactivity//在这个阶段已经初始化了数据和事件，包括data和methods，但是还没编译模板
injections理解这句首先需要知道什么是“依赖注入”，vue中有provide和inject，可以将父组件provide中的对象注入到子孙的属性中。这么说这个过程
reactive，就是将数据包装成一种可观测的类型，当数据产生变更的时候，我们能够感知到。这个操作后data数据应该就可以是响应的了。
4.created() //钩子函数运行，此时你可以使用created钩子函数获取到vue中初始化的数据
组件实例创建完成，属性已绑定，此时DOM还未生成 执行的钩子函数。

模板编译阶段
5.el或者template判断，如果没有template就render虚拟dom，(template相当于虚拟dom)
检查vue配置，即new Vue{}里面的el项是否存在，有就继续检查template项。没有则等到手动绑定调用vm.$mount()
检查配置中的template项，如果没有template进行填充被绑定区域，则被绑定区域的el对象的outerHTML
（即整个#app DOM对象，包括<div id=”app” >和</div>标签）都作为被填充对象替换掉填充区域。

6.beforeMount() //是位于编译模板阶段的钩子函数，在这里可以进行一般数据的获取和更改，同 created() 函数一样更改数据不会触发update和其他钩子函数，这个阶段是在内存中生成了虚拟DOM还没有挂载到页面中！！！
7.Create vm.$el and replace “el” with it-------之前是编译阶段，在内存中生成的是虚拟的DOM，还没挂载到页面上，编译模板阶段之后就是挂载阶段，此时在内存中的虚拟DOM挂载到了浏览器的页面上！
编译，并替换了被绑定元素；说白了就是我们用的模板语法被真实的数据替换了,比如html中的{{msg}}被替换了真实的数据。
8.mounted() //此时的vue实例已经被渲染到页面上，用户可以看到vue实例的页面，我们可以操作DOM等。

如果修改数据:
9.beforeUpdate() //更改data数据后，当虚拟DOM中的data发生改变时触发，此时虚拟DOM没有加载到页面上。页面上的数据不变，虚拟DOM中的数据改变。
10.updated()//更改data数据之后，虚拟DOM中的data发生改变页面上的data也发生改变（即新生成的虚拟DOM挂载上页面了）

11.beforeDestroy//销毁前执行的钩子函数，可以继续使用vue实例中的数据，如data，methods，filters，derictives等等。
12.destroyed已经销毁了，vue实例中的数据不可用了

actived keepalive组件激活时
deactived keepalive组件隐藏时 v-if="false"激活时
errorCaptured 捕获异常时
serverPrefetch’ SSR服务端渲染时