Vue的生命周期_学习笔记

笔记视频来自于b站快速了解Vue生命周期

1.什么是生命周期方法?

和wbpack生命周期方法一样,都是在从生到死的特定阶段调用的方法
生命周期钩子 = 生命周期函数 = 生命周期事件

2.Vue生命周期方法分类

2.1 创建期间的生命周期方法

beforeCreate
created
beforeMount
mounted

2.2 运行期间的生命周期方法

beforeUpdate
updated

2.3 销毁期间的生命周期方法

beforeDestroy
destroyed

3. Vue生命周期执行过程

1.创建vue实例
2.初始化vue中的事件和声明周期方法
3.调用beforeCreate生命周期方法: 调用这个方法时,并没有初始化好vue实例中的数据和方法,此时仅仅初始化好了vue实例中的事件和生命周期方法而已。因此在调用beforeCreate方法是还不能访问vue实例中保存的data和methods属性.
在调用beforeCreate的时候,仅仅表示Vue实例刚刚被创建出来,
此时此刻还没有初始化好Vue实例中的数据和方法,所以此时此刻还不能访问Vue实例中保存的数据和方法;
4.初始化vue中保存的数据和方法;
5.调用created: 此时可以访问vue实例中保存的data和methods;
在调用created的时候,是我们最早能够访问vue实例中保存的数据和方法的地方;
6.调用beforeMount :
在调用beforeMount的时候,表示vue已经编译好了最终模板,但是还没有将最终的模板渲染到界面上;
7.调用mounted :
在调用mounted的时候,表示vue已经完成了模板的渲染,表示我们已经可以拿到界面上渲染之后的内容了

8.调用veforeUpdate:
在调用beforeUpdate的时候,表示vue实例中保存的数据被修改了;
注意:只有保存的数据被修改了才会调用beforeUpdate,否则不会调用
注意:在调用beforeUpdate的时候,数据已经更新了,但是界面还没有更新
9.调用updated:
在调用updated的时候,表示vue实例中保存的数据被修改了,并且界面也同步了修改的数据了,
也就是说:数据和界面都同步更新之后就会调用updated

10.beforeDestroy:
在调用beforeDestroy的时候,表示当前组件即将被销毁了
注意点:只要组件不被销毁,那么beforeDestroy就不会调用;
beforeDestroy函数是我们最后能够访问到组件数据和方法的函数;
11.调用destroyed:
在调用destroyed的时候,表示当前组件已经被销毁了
注意点:只要组件不被销毁,那么destroyed就不会调用
不要在这个生命周期方法中再去操作组件中数据和方法;