23-Vue生命周期方法

这一篇文章主要是概念的内容,需要大家理解记忆

0.url

https://cn.vuejs.org/v2/guide/instance.html#生命周期图示

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.png
image.png
image.png