vue--生命周期(分析及其使用)

Vue生命周期

生命周期：一个实例组件从开始 -> 运行 -> 销毁的整个过程

生命周期函数：一个实例从开始 -> 运行 -> 销毁的整个过程中每一个阶段实现的不同的逻辑操作函数叫做生命周期函数

存在的意义：完善框架体系，可以在不同的钩子函数中处理不同的逻辑，做出相应的操作，效率高，便于维护！

生命周期过程

new VUE() //这一刻就开始了一个生命周期

beforeCreate() 

执行生命周期创建的第一个阶段，此时 data 中的数据和 methods 方法以及 $el 也就 view 均没有进行开始投入使用，也就意外这这个阶段我们基本上什么也做不了

create()

执行声明周期创建的第二个阶段，此时 data 中的数据和 methods 中的方法均已经构建结束，可以投入使用，但是 view 层面还是空白的，还没有开始进行渲染页面，一般我们这个时候可以做数据初始化的逻辑处理，也就是 ajax 的请求可以此阶段进行

beforeMount()

执行生命周期创建的第三个阶段，此时框架做的是进行 view 模板的构建，也就是说，虚拟DOM此时是存在的，但是数据不是最新的数据，页面用的还是没有数据驱动的页面

mounted()

执行生命周期创建的最后一个阶段，此时 view 上的页面是最新的数据驱动出来的页面，也就是 data 中的数据完全已经渲染到了页面上，这一阶段的结束也就意味着生命周期创建阶段结束了，开始进入运行阶段

beforeUpdata()

执行生命周期运行的第一个阶段，这个不是每次都执行的，只是当data中的数据变化的时候才会驱动该阶段的执行，当数据变化的时候，首先会将数据改变，但是也只是数据改变了，页面上并没有进行变化，中间会经历一个虚拟DOM的移除替换的过程，这个阶段结束可以进入这个过程

updated()

执行生命周期运行阶段的第二个阶段，此时经历了框架对旧数据的移除，新数据的增加的过程以后，页面以及是被最新的数据驱动渲染结束的样子，那么每次data中的数据发生变化的时候，都会经历一次 berforeupdate -> updated的过程

beforeDestory()

执行生命周期销毁第一阶段，此时当前组件上 data 中的数据和 methods 中的方法均还可以正常使用

destoryed()

执行生命周期销毁的第二阶段，也就是生命周期的最后一个阶段，该阶段data中的数据和methods中的方法均OVER了，不可以被使用了，一般我们这个阶段可以进行清除一些定时器或者释放内存等操作