vue的生命周期

VUE生命周期

beforeCreate ：

　　第一个生命周期函数，表示实例在完全创建出来之前会执行它，在执行它时，data和methods中的数据都还未初始化。

beforeCreate -> created：

　　初始化vue实例，进行数据观测

created：

　　第二个生命周期函数，完成数据观测，此时data和methods已经初始化完成，可在此处进行异步请求；此时vm.$el 并没有被创建

created -> beforeMount：

　　进行模板编译；首先会判断对象是否有el选项，如果有的话就继续向下编译，如果没有，则会停止编译，也就意味着停止了生命周期，直到在改vue实例上调用vm.$mount(el)才会继续编译；

　　判断是否传入template选项，若果有则会通过一系列的编译生成 render 函数；否则则将外部的HTML作为模板进行编译；这里优先级：render > template > outerHTML

beforeMount：

　　第三个生命周期函数，表示模板在内存中已经编译好了，但是并没有渲染到页面中。页面显示的还仅仅是模板字符串；在此阶段可获取到vm.el

beforeMount -> mounted：

　　在此阶段vm.el完成挂载，vm.$el生成的DOM替换了el选项所对应的DOM

mounted：

　　第四个生命周期函数，此时内存中的模板已经真实的挂载到了页面中，用户可以看到渲染好的页面了；可以在此阶段进行一些dom操作

beforeUpdate：

　　执行它时，data中的数据已经被更新了，但是页面中的data还未被替换过来，view层还未更新；若在beforeUpdate中再次修改数据，不会再次触发更新方法

updated：

　　已完成view层的更新，若在updated中再次修改数据，会再次触发更新方法（beforeUpdate、updated），导致内存爆炸

beforeDestroy：

　　实例被销毁前调用，此时实例属性与方法仍可访问

destroyed：

　　完全销毁一个实例。可清理它与其它实例的连接，解绑它的全部指令及事件监听器，定时器等

 

 

Vue实例的生命周期大致可分为4个阶段：

　　初始化阶段：为Vue实例上初始化一些属性，事件以及响应式数据；

　　模板编译阶段：将模板编译成渲染函数；

　　挂载阶段：将实例挂载到指定的DOM上，即将模板渲染到真实DOM中；

　　销毁阶段：将实例自身从父组件中删除，并取消依赖追踪及事件监听器；

 

初始化阶段：

　　初始化阶段所做的工作也可大致分为两部分：第一部分是new Vue()，也就是创建一个Vue实例；第二部分是为创建好的Vue实例初始化一些事件、属性、响应式数据等

 

模板编译阶段：

　　Vue源码构建的两种版本：完整版本和只包含运行时版本。并且我们知道了模板编译阶段只存在于完整版中，在只包含运行时版本中不存在该阶段，这是因为在只包含运行时版本中，当使用vue-loader或vueify时，*.vue文件内部的模板会在构建时预编译成渲染函数，所以是不需要编译的，从而不存在模板编译阶段

 

挂载阶段：

　　在该阶段中所做的主要工作是创建Vue实例并用其替换el选项对应的DOM元素，同时还要开启对模板中数据（状态）的监控，当数据（状态）发生变化时通知其依赖进行视图更新

　　挂载阶段所做的工作分成两部分进行了分析，第一部分是将模板渲染到视图上，第二部分是开启对模板中数据（状态）的监控。两部分工作都完成以后挂载阶段才算真正的完成了　

 

销毁阶段：

　　在该阶段所做的主要工作是将当前的Vue实例从其父级实例中删除，取消当前实例上的所有依赖追踪并且移除实例上的所有事件监听器