Vue生命周期

104 阅读1分钟

什么是Vue声明周期?

Vue生命周期是指Vue实例对象从创建之初到销毁的整个过程,Vue所有功能的实现都是围绕着声明周期进行的,在生命周期不同的阶段调用对用的钩子函数可以实现组件数据管理以及DOM渲染这两大重要功能

Vue的声明周期可以分为八个阶段,分别是:

beforecreate(创建前)
created(创建后)
beforemount(挂载前)
mounted(挂载后)
beforeUpdate(更新前)
updated(更新后)
beforeDestroy(销毁前)
destroyed(销毁后)

第一次加载页面会触发的钩子函数有:

beforecreate(创建前)
created(创建后)
beforemount(挂载前)
mounted(挂载后)

每个生命周期具体适合的场景有:

beforecreate(创建前):可以在这个加loading事件,在加载实例时触发
created(创建后):初始化完成时的事件在这里可以写,如在这里结束loading事件,异步请求也适合在这里调用
beforemount(挂载前)
mounted(挂载后):挂在元素,获取DOM元素
beforeUpdate(更新前)
updated(更新后):如果对数据统一做处理,可以在这里写对应的处理方法
beforeDestroy(销毁前)
destroyed(销毁后)
nextTick:更新数据后立即操作DOM

其中created和mounted的区别在于:

created在模板渲染成HTML之前调用,即通常初始化某些属性值,然后再渲染成视图

mounted在模板渲染成HTML后调用,通常是初始化页面完成之后,再对HTML的DOM节点进行一些需要操作