目录
一、什么是生命周期和生命周期函数
生命周期:指的是组件从创建-运行-销毁的全过程,强调的是一个时间段
生命周期函数:指的是Vue框架提供的内置对象,会伴随组件的生命周期,按照次序依次执行
组件生命周期的三个阶段
二、组件的创建阶段
1. beforeCreate
组件创建阶段的第一个生命周期函数,这个阶段组件的props、methods、data等都未被创建,还不能使用
beforeCreate() {}
2. created
组件创建阶段的第二个生命周期函数,组件的props/data/methods已创建好,都处于可用状态。但是组件的模版结构尚未生成
-
这个生命周期函数非常常用,经常调用methods里面的方法,请求服务器的数据
-
并且把请求到的数据,转存到data中,供template 模版渲染的时候使用
created() { }
3. beforeMount
组件创建阶段的第三个生命周期函数,这个阶段是要把内存中编译好的html结构渲染到浏览器中,此时浏览器中还没有当前组件的DOM结构
beforeMount() {}
4. mounted
组件创建阶段的第四个生命周期函数,这个阶段已经把内存中的html结构成功渲染到浏览器中,此时浏览器包含了当前组件DOM结构
- 在这个阶段可以最早操作DOM结构
mounted() {}
三、组件的运行阶段
1. beforeUpdate
组件运行时的第1个生命周期函数,这个阶段将要根据变化过后,最新的数据,重新渲染组件的模版结构
beforeUpdate() {}
2. updated
组件运行时的第2个生命周期函数,已经根据最新的数据,完成了组件DOM结构的重新渲染
-
当数据变化之后,为了能够操作到最新的DOM结构,必须把代码写到updated生命周期函数中
updated() {}
四、组件的销毁阶段
1. beforeDestroy
组件销毁时的第1个生命周期函数,将要销毁此组件,此时尚未销毁,组件还处于正常工作的状态
beforeDestroy() {}
2.destroyed
组件销毁的第2个声明周期函数,组件已经被销毁,此组件在浏览器中对应DOM结构已经被完全移除
destroyed() {}