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实例的生命周期已经全部结束。

猜你喜欢

转载自blog.csdn.net/qq_44313091/article/details/103987830