16.vue生命周期

87 阅读4分钟

image.png vue的生命周期就是指在一个组件从创建到销毁的过程自动执行的函数,vue.js暴露出来一些钩子函数.通过这些钩子我们可以在对应的生命周期里执行我们的代码.一个11个 包括创建前后=>挂载前后=>更新前后=>销毁前后 和keep-alive的进入出去,还有一个全局的错误钩子

vue2生命周期

BeforeCreate

该函数执行在组件创建、数据观测 (data observer) 和 event/watcher 事件配置之前,实例初始化之后被调用。 在该阶段组件未创建,不能访问数据,组件中的 data,ref 均为 undefined。 一般开发中不做操作.

Created

在组件创建完成后立即调用
在这一步 实例已经完成了数据观测 属性和方法的运算 watch、event事件回调,但是还未渲染成HTML模板,组件中的data对象已经存在,可以对data进行操作了,即可以访问数据,发请求,ref依旧是undefined,挂载阶段还没开始,不能访问dom. 一般开发中在这里执行一些组件初始化的操作,比如发送请求拿数据.这里也是最早能拿数据的钩子

BeforeMount

此时模板已经编译完成,但还没有被渲染至页面中(即为虚拟dom加载为真实dom),此时el存在则会显示el。在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数, 当vue实例中,el为挂载目标,未对el进行定义,则this.el显示undefined,但页面中存在template也能识别挂载目标,因为template可以被看成占位符。如果对其进行定义则显示

,故所以,beforeMount读取不了真实的el,在mounted才能读取到真实的el,因为el只有渲染完成后才会存在。这里讲的el是真实的el。在真实的el之前存在前,在beforeMount中的其实是页面中的#app,是挂载的目标。 这个钩子过后在,mounted之前是子组件加载的时机.有可能也会用到

Mounted

此时模板已经被渲染成真实DOM,用户已经可以看到渲染完成的页面,页面的数据也是通过双向绑定显示data中的数据。 这实例创建期间的最后一个生命周期函数,当执行完 mounted 就表示,实例已经被完全创建好了.这是我们操作dom最早的时机

BeforeUpdate

更新前状态(view层的数据变化前data数据已经改变),重新渲染之前触发,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。只有view上面的数据变化才会触发beforeUpdate和updated,仅属于data中的数据改变是并不能触发。

Updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。 页面也完成了更新,此时,data数据是最新的,同时,页面上呈现的数据也只最新的。

BeforeDestroy

在实例销毁之前调用,这里依然可以操作,可以在这里清除定时器,清除事件监听,防止内存泄漏. 这个阶段完成后就执行子组件的销毁阶段.

Destroyed

在销毁后调用 所有子实例被销毁 所有的事件监听器会被移除
在服务器渲染期间不被调用

Activated

keep-alive组件激活时触发 可以在改钩子获取一些页面初始化的数据,重新加载之前保存的数据.比如路由信息,屏幕高度,等等

Deactivated

被 keep-alive 缓存的组件停用时调用。可以储存一些数据.比如路由信息,屏幕高度,等等

ErrorCaptured

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。