Vue中的生命周期函数详解

首先对Vue实例进行初始化，在初始化阶段，对象身上只有一些生命周期函数和默认的事件，其他的东西还都未创建。beforeCreate表示在初始化之前，执行beforeCreate函数时，data和methods中的数据还都没有被初始化。当created函数执行的时候，data和created都已经被初始化完毕，如果要调用methods中的方法和data中的数据，最早只能在created函数中操作。

接下来，将开始进行Vue的模板编译，最终将会在内存中生成一个编译好的最终模板字符串，然后把这个模板字符串渲染为内存中的DOM，此时，只是在内存中渲染好了模板，并没有挂载到页面中去。当执行beforeMount函数时，表示模板已经在内存中渲染好了，但是并没有真正的挂载到页面中去，此时页面还是旧的。然后将内存中编译好的模板，真实的替换到浏览器的页面中去，接下来将会执行mounted函数，只要执行了mounted函数，就表示整个Vue实例初始化完毕了，此时组件已经脱离了创建阶段，进入了运行阶段。

在运行阶段，只有两个生命周期函数，beforeUpdate和updated，这两个事件会根据data数据的改变，有选择性的执行0次到多次。当执行beforeUpdate函数的时候，页面中显示的数据还是旧的。此时data里的数据已经更新完毕，但是页面尚未和最新的数据保持同步。执行完beforedUpdate后，会根据data中得到数据，在内存中重新渲染出一份最新的内存DOM树，当最新的内存DOM树被更新之后，会把最新的内存DOM树重新渲染到真实的页面中去，这时候数据从data（model层）->view（视图层）的更新。当updated事件执行的时候，页面和data数据已经保持同步了，都是最新的。

当执行boforeDestory钩子函数的时候，Vue实例就已经从运行阶段进入到了销毁阶段；当执行beforeDestory的时候，实例身上所有的data和所有的methods以及过滤器、指令等，都处于可用状态，此时还没有真正执行销毁过程。当执行destoryed函数的时候，组件已经被完全销毁了，此时，组件中的所有数据、方法、过滤器、指令等，都已经不可用了。此时Vue实例的生命周期已经全部结束。