VUE 生命周期

vue生命周期就是每一个vue实例从创建到销毁的过程,在这个过程中,他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。

通俗来说就是vue实列创建了,经历了一些列的事件,然后销毁了这样的过程。

一般来说vue生命周期分为8钩子函数:

beforeCreate 创建vue实列之前

created 创建实列成功

beforeMount 渲染DOM之前

mounted 渲染DOM完成

beforeUpdate 数据更新之前

updated 数据更新完成

beforeDestroy 销毁之前

destroyed 销毁完成

VUE 生命周期_第1张图片

1.beforeCreate

在beforeCreate钩子函数中,vue实列还没有挂载完成,此时的this是获取不到的,data中的数据也是获取不到的,页面中的真实dom节点也没有挂载出来,为null。

2.create

在beforeCreate钩子函数中,内部数据已经背挂载,此时可以获取到this,也可以获取的data中的数据,但是此时页面中的真实dom节点还是没有挂载出来,为null。

3.beforeMount 

beforeMount 钩子函数与created钩子函数相似,可以获取this与data中的数据,即将可以获取到真实的dom。

4.mount 

在mount钩子函数中,数据挂载完毕,真实dom也已经渲染出来。

5.beforeUpdate

beforeUpdate并不会主动调用,在dom挂载完成后,只有在数据更新时,监听到数据的变化才会执行,但在次钩子函数中,获取到的数据是数据更行之前的数据。

6.updata

updated钩子函数里面dom获取的数据内容是更新后的内容,生成新的虚拟dom,与上一次的虚拟dom结构进行对比,比较出来差异(diff算法),再去进行真实dom的重新渲染操作。updated中真实dom里面显示的数据跟内存中data里面的数据趋于一致

7.beforeDestroy

当组件销毁的时候,就会触发执行vm.$destroy(),组件就会被销毁。beforeDestroy代表销毁之前,可以做一些善后操作,例如:清除事件绑定,清除定时器,垃圾回收。

8.destroy

组件销毁完成。

我们可以根据不同的业务需求在vue提供的钩子函数做不同的处理。

你可能感兴趣的:(vue2.x技术分享,vue.js,前端,javascript)