首先我先介绍邵一下什么是生命周期?
Vue实例从创建到销毁的过程,就是生命周期。
过程是 创建,挂载,更新,销毁。
Vue的生命周期常见的有八个:
Vue2的生命周期:
创建前:beforeCreate 创建后:created
挂载前:beforeMount 挂载后:Mountd
更新前:beforeUpdate 更新后:Updated
销毁前:beforeDestory 销毁后:Destoryed
Vue3的生命周期:
创建前:beforeCreate 创建后:created
挂载前:beforeMount 挂载后:Mountd
更新前:beforeUpdate 更新后:Updated
销毁前:beforeUnMount 销毁后:UnMountd
注意!!!:Vue2的生命周期和Vue3的生命周期 创建前/后,挂载前/后 跟新前/后 虽然都是一样的, 但是 销毁的时候就有变化了 Vue2的是:销毁前:beforeDestory 销毁后:Destoryed ,
Vue3的是:销毁前:beforeUnMount 销毁后:UnMountd
各个生命周期的调用时机
(创建前)数据的准备阶段
(创建后)数据准备成功,但dom还未挂载
(载入前)dom挂载之前但还未被挂载,这时捕获不到dom
(载入后)dom挂载成功,可以在这里获取dom并进行操作
(更新前)更新之前,数据更新还未更新
(更新后)数据更新了,可以继续更新后的操作
(销毁前)组件销毁之前,还可以获取dom实例
(销毁后)组件销毁了,获取不到dom,但可以获取data中的数据
注意!!! Vue2和Vue3生命周期的调用时机是一样的