beforecreate:实列创建之前。created:实列创建完成。beforeMount:挂载开始之前被调用。mounted:实列挂载到Dom上beforeupdate:响应式数据更新时调用updated:虚拟dom重新渲染和打补丁之后调用beforedestroy :实列销毁之前调用destroyed :实列销毁后调用四个执行 过程 create初始 Mount 加载 update更新 destroy销毁1beforeCreate()遇到的第一个生命周期函数表示实例完全被创建出来之前,会执行它注事:在beforeCreate生命周期函数执行的时候,data和methods中的数据都还没有没初始化2created(){}第二个生命周期data和methods 都已经被初始化好了!如果要调用methods中的方法 或者操作data中的数据最早先用created方法
下来是vue开始编译模板 --------------------------------------这里表示Vue开始编辑模板,|把Vue代码中的那些指令进行执行,最终,在内存中生成一个编译好的最终模板字符串然后,把这个模板字符串,渲染为内存中的DOM此时,只是在内存中,追染好了模板,并没有把模板|挂载到真正的页面中去;---------------------------------------3第三个生命周期函数:beforemont(){}beforeMount(){ // 这是遇到的第3个生命周期函数,表示模板已经在内存中编辑完成了,但是尚未把模板渲染到页面中/在beforeMount 执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串beforeMount在执行时 此函数执行的时候,模板已经在内存中编译好了, 但是尚未挂载到页面中去, 此时,页面还是旧的下一步Create vm,Seland replace'el" with it这-步,将内存中编译好的模板,真实的替换到浏览器的页面中去;mounted(){ // 这是遇到的第4个生命周期函数,表示,内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了------------------------------------------如果要通过某些插件操作页面.上的DOM节点了,最早要在mounted中进行第四个生命周期:只要执行完了mounted , 就表示整个Vue实例已经初始化完毕了;此时,组件已经脱离了创建阶段;进入到了运行阶段下面这些是组件运行阶段的生命周期函数只有两个:------------------------------------------beforeUpdate和updated第五个生命周期执行beforeUpdate的时候,页面中的显示的数据,还是旧的,此时data 数据是最新的,页面尚未和最新的数据保持同步
Virtmual DOMre-renderand patch这一步执行的是:先根据data中最新的数据,在内存中,重新渲染出-份最新的内存DOM树,当最新的内存DOM树被更新之后,会把最新的内存DOM树,重新渲染到真实的页面中去,这时候,就完成了数据从data(Model层) > view(视图层) 的更新第六个生命周期:updated 事件执行的时候,页面和data数据已经保持同步了,都是最新的第七个生命周期:beforeDestroy第八个生命周期:当执行beforeDestroy钩子函数的时候, Vue实例就已经从运行阶段,进入到了销毁阶段;当执行beforeDestroy 的时候,实例身上所有的data和所有的methods ,以及过滤器、指令....都处于可用状态,此时,还没有真正执行销毁的过程第九个生命周期:destroyed当执行到destroyed函数的时候,组件已经被完全销毁了,此时,组件中所有的数据、方法,指令、过滤器点都已经不可用了
转载于:https://www.cnblogs.com/yangjingyang/p/11390610.html