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节点依旧存在
在此阶段可以做的事情:组件销毁时进行提示
|