Vue 钩子函数有哪些,有哪些使用场景?

742 阅读1分钟

1、各阶段包含钩子:

beforeCreate 在data数据注入到vm实例之前,此时vm身上没有数据

created 在data数据注入到vm实例之前,此时vm身上有数据

beforeMount 生成的结构替换视图之前,此时DOM还没更新

mounted 生成的结构替换视图之前,此时DOM已经更新完成

beforeUpdata 数据变化了,dom更新之前

updated 数据变化了,dom更新之后

activated 被keep-alive缓存的组件激活时调用

deactivated 被keep-alive缓存的组件停用时调用

beforeCreate 实例销毁,是否资源之前

destroyed 实例销毁,是否资源之后

这些钩子函数会在vue的生命周期的不同阶段,自动被vue调用

2、常用的钩子函数场景:

beforeCreate 做loading的一些渲染

created 结束loading,发送数据的请求,拿数据

mounted 可以对dom进行操作

updated 监听数据的更新

beforeDestroy 销毁非vue资源,防止内存泄漏,例如清除定时器

activated 当我们运用了组件缓存时,如果想每次切换都发送一次请求的话,需要把请求函数写在activated中,而写在created或mounted中,其只会在首次加载该组件的时候起到作用。