vue生命周期钩子函数

论坛 期权论坛 脚本     
已经匿名di用户   2021-12-20 01:35   3025   0

vue生命周期钩子函数


组件或者实例从创建到销毁的一系列过程叫做组件的生命周期。vue在整个生命周期里面提供了一些函数,可以在内部实现一些业务逻辑, 并且这些函数会在一些特定的场合下去执行。(在生命周期的某一个时刻进行触发)

组件的生命周期钩子函数大致可以分为三个阶段:初始化、运行中、销毁

也可以理解为创建、渲染、更新、销毁

初始化阶段: beforeCreate created beforeMount mounted

运行中阶段: beforeUpdate updated

销毁阶段: beforeDestroy destroyed

钩子函数

beforeCreate --创建前,

数据拿不到(undefined)、dom节点没有渲染(null),

在此阶段可以做的事情:lodding效果效果

created --创建后,(常用)

拿到数据(data methods等),dom节点没有被渲染,

在此阶段可以做的事情:解决loading,请求ajax数据为mounted渲染做准备

beforeMount --渲染前

拿到数据(data methods等),dom节点还是虚拟的dom节点,

在此阶段可以做的事情:。。。

mounted --渲染后 (常用)

数据和dom都已经渲染完成

在此阶段可以做的事情:操作dom的工作基本都在这里。这里也可以发起ajax请求

beforeUpdate --更新前

不会主动触发,只会在data变化时触发,这里的dom元素的数据也是更新前的数据,但是实际内存中的数据已近改变了

在此阶段可以做的事情:。。。

updated —更新后

(由于数据一更新就会触发,触发频率高又要操作dom进行渲染,所以很少操作,即使操作也要保证方法的轻量级,有别的处理办法尽量不要使用updated)

不会主动触发,只会在data变化时触发,这里的dom元素里的数据,就是更新后的数据,和实际内存里的数据一致

在此阶段可以做的事情:数据更新时,做一些处理(此处也可以用watch进行观测)

beforeDestroy —销毁前

组件销毁时触发,

在此阶段可以做的事情:清除一些事件绑定例如定时器

destroyed —销毁后

组件销毁时触发,vue实例解除了事件监听、双向绑定 watch等操作,但DOM节点依旧存在

在此阶段可以做的事情:组件销毁时进行提示

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:81
帖子:4969
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP