vue组件的生命周期

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函数的时候,组件已

经被完全销毁了，此时,组件中所有的数

据、方法，

指令、过滤器点都已经不可

用了