vue2的生命周期

最新推荐文章于 2024-07-05 21:53:30 发布

Uranus_1

最新推荐文章于 2024-07-05 21:53:30 发布

阅读量208

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Uranus_1/article/details/130430040

版权

Vue生命周期：从创建、加载、使用、销毁整个一系列过程 Vue整个生命周期中的每一个过程都会执行对应的函数（钩子函数）

其基本涵义可以通俗地理解为“从摇篮到坟墓”的整个过程，在Vue中实例从创建到销毁的过程就是生命周期，即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。

Vue生命周期总共可以分为8个阶段：创建前后, 载入前后,更新前后,销毁前销毁后，以及一些特殊场景的生命周期。


beforeCreate	组件实例被创建之初( 此时`vm.$el` 并没有被创建)	data和dom都是undefined
created	组件实例已经完全创建(`vm.el`获取到的是挂载`DOM`的)	data已经实例化,只有dom为undefined(这里建议使用异步请求,如ajax、axios,请求获取数据,将按生命周期顺序,去渲染数据,不会在渲染完数据,在重新请求,去重新重绘数据,避免资源浪费)
beforeMount	组件挂载之前 (vm.el虽已完成DOM初始化，但并未挂载在el选项上)	data和dom都已加载,但是dom没有渲染数据(虚拟dom)
mounted	组件挂载到实例上去之后 (vm.el完成挂载，vm.$el生成的DOM替换了el选项所对应的DOM)	dom中渲染了数据(真实dom)(这里建议进行dom操作或者使用refs, 因为数据已经渲染,拿取方便)
beforeUpdate	组件数据发生变化，更新之前	data的数据发生了改变, dom中的数据没改变
updated	组件数据更新之后	data和dom中的数据都改变了
beforeDestroy	组件实例销毁之前	两者都没有销毁
destroyed	组件实例销毁之后	两者都变为undefined
activated	keep-alive 缓存的组件激活时
deactivated	keep-alive 缓存的组件停用时调用
errorCaptured	捕获一个来自子孙组件的错误时被调用

关注