Vue生命周期函数
一、组件创建期间的4个钩子函数
01 beforeCreate()
- 这是我们遇到的第一个生命周期函数,表示实例完全被创建出来之前,会执行它
- 注意:在beforeCreate()生命周期函数执行的时候,data和methods中的数据都还没有被初始化
02 created()
- 这是遇到的第二个生命周期函数
- 在created()中,data和methods都已经被初始化好了
- 如果要调用methods中的方法或者操作data中的数据,最早,只能在created()中操作
03 beforeMount()
created()到beforeMount()之间干的事情:
Vue开始编辑模板,把Vue代码中的那些指令进行执行,最终,在内存中生成一个编译好的最终模板字符串,渲染为内存中的DOM。此时,只是在内存中,渲染好了模板,并没有把模板挂载到真正的页面中去;
- 这是第三个生命周期函数
- 在beforeMount()执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串
04 mounted()
此时,内存中编译好的数据,已经真实的转换到浏览器页面中去了,用户已经能看到渲染好的页面了,此时组件已进入了运行阶段
- 这是第四个生命周期函数
- 执行完mounted(),就表示实例已经被完全创建好了
- 如果要通过某些插件操作页面上的DOM节点,最早要在mounted()中操作
二、组件运行阶段的钩子函数
触发条件:data数据改变
01 beforeUpdate()
当执行beforeUpdate()的时候,页面中的显示的数据,还是旧的,此时data数据是最新的,页面尚未和最新的数据保持同步
02 Updated()
beforetUpdate()到Updated()之间干的事情:
先根据data中最新的数据,在内存中,重新渲染出一份最新的内存DOM树,当最新的内存DOM被更新之后,会把最新的内存DOM树,重新渲染到真实的页面中去,这时候,就完成了数据从data(Model层) -> View(视图层)的更新,页面和data数据保持同步
三、组件销毁阶段的钩子函数
01 beforeDestroy()
当执行beforeDestroy()钩子函数的时候,Vue实例就已经从运行阶段进入到了销毁阶段,实例身上所有的data和methods以及过滤器、指令等都处于可用状态,此时,还没有真正执行销毁的过程。
02 destroyed()
当执行到destroyed()函数时,组件已经被完全销毁,此时,组件中所有数据、方法、指令、过滤器都已经不可用
当执行到destroyed()函数时,组件已经被完全销毁,此时,组件中所有数据、方法、指令、过滤器都已经不可用