23-Vue生命周期方法

2019-02-23 本文已影响10人梦想成为小仙女

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

lifecycle.png

1.什么是生命周期
Vue实例创建,运行到销毁的过程

2.关注点:生命周期方法
Vue从生到死的过程中,伴随着各种各样的事件,这些事件会自动触发一些方法,这些方法,我们统称为生命周期方法
PS:生命周期钩子=生命周期函数=生命周期事件

3.Vue生命周期方法分类
3.1 创建期间生命周期方法
beforeCreate,created,beforeMount,mounted
3.2 运行期间生命周期方法
beforeUpdate,updated
3.3 销毁期间生命周期方法
beforeDestroy,destroyed

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 此时此刻可以对界面进行其它操作了

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