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 DOM
re-render
and patch
这一步执行的是:先根据data中最新的数据,在内存中,重新渲染出-份最新的
内存DOM树,
当最新的内存DOM树被更新之后,会把最新的内存DOM树,重新渲染到真实
的页面中去,这时候,就完成了数据从data(Model层) > view(视图层) 的更新
第六个生命周期:updated 事件执行的时候,页面和data数据已经保持同步了,都是最新的
第七个生命周期:beforeDestroy
第八个生命周期:当执行beforeDestroy钩子函数的时候, Vue实例就已经从运行阶段,进入到了
销毁阶段;
当执行beforeDestroy 的时候,实例身上所有的data和所有的methods ,以
及过滤器、指令....都处于可用状态,此时,还没有真正执行销毁的过程
第九个生命周期:destroyed
当执行到destroyed函数的时候,组件已
经被完全销毁了,此时,组件中所有的数
据、方法,
指令、过滤器点都已经不可
用了