这一篇文章主要是概念的内容,需要大家理解记忆
0.url
1.助记图
lifecycle.png一.Vue生命周期方法
1.什么是生命周期
Vue实例创建,运行到销毁的过程
2.关注点:生命周期方法
Vue从生到死的过程中,伴随着各种各样的事件,这些事件会自动触发一些方法,这些方法,我们统称为生命周期方法
PS:生命周期钩子=生命周期函数=生命周期事件
3.Vue生命周期方法分类
3.1 创建期间生命周期方法
beforeCreate,created,beforeMount,mounted
3.2 运行期间生命周期方法
beforeUpdate,updated
3.3 销毁期间生命周期方法
beforeDestroy,destroyed
二.Vue创建期间生命周期方法
1.beforeCreate:
1.1 执行beforeCreate表示Vue实例刚出生,无任何内容
1.2 data和methods都没有初始化
2.created:
2.1 执行created表示Vue实例已经初始化好了部分内容,如data和methods
2.2 想在Vue实例中最早访问到data/methods,只有在这个方法访问
3.beforeMount
执行beforeMount表示已经根据数据编译好了模板,但是还没有渲染到界面上
4.mounted
4.1 执行mounted的时候表示模板已经渲染到界面上了
4.2 此时此刻可以对界面进行其它操作了
三.Vue运行期间生命周期方法
1.beforeUpdate
1.1 只要data中的数据发生了变化,就会执行
1.2 执行beforeUpdate的时候,data中的数据已经是最新的了,但是还没有更新界面上的数据
2.updated
执行updated的时候,data中的数据已经是最新的了,并且界面上的数据也被更新了,也是最新的了
四.销毁期间生命周期方法
1.beforeDestroy
1.1 执行beforeDestroy的时候,表示Vue实例即将销毁,但是还未销毁,实例中的数据还可以使用
1.2 最后使用Vue实例的地方
2.destroyed
2.1 执行destroyed的时候,Vue实例已经完全销毁
2.2 实例中的任何内容都不能使用了
五.代码测试
image.pngimage.png
image.png