vue3生命周期

与 2.x 版本生命周期相对应的组合式 API

 

beforeCreate    ->    使用 setup()

created             ->    使用 setup()

beforeMount    ->   onBeforeMount

mounted           ->   onMounted

beforeUpdate   ->   onBeforeUpdate

updated            ->   onUpdated

beforeDestroy  ->   onBeforeUnmount

destroyed         ->   onUnmounted

errorCaptured  ->   onErrorCaptured

 

 

 

Vue2生命周期

每个组件都是独立的，都有属于它自己的生命周期，创建、挂载、更新、销毁就是生命周期

 

生命周期有8个分别是：

 

若组件被<keep-alive>包含，则多出下面两个钩子函数。

 

 

Vue2

 

activated: 被包含中的组件，会多出来两个生命周期钩子函数。被激活时执行

 

deactivated： 比如从A组件，切换到B组件，A组件消失时执行。

 

 

Vue3

 

onActivated(): 被包含中的组件，会多出来两个生命周期钩子函数。被激活时执行

 

onDeactivated(): 比如从A组件，切换到B组件，A组件消失时执行。

 

beforeCreate:创建前 ---- created:创建后

 

beforeCreate(创建前)： 在实例初始化之后，这个时候this还不能使用，data中的数据、methods的方法、以及watcher中的事件都不能获得

 

created(创建后)： 实例已经创建完成之后被调用，这个时候可以操作vue中的数据和方法，但是不能对dom节点进行操作

 

beforeMount:挂载前 — mounted:挂载后

 

beforeMount(挂载前)： 在挂载开始之前被调用，$el属性已经存在，只是数据未挂载到模板中。

 

mounted(挂载后)： 挂载完毕，这是dom节点被渲染到文档中，dom操作在此时可以正常进行。

 

beforeUpdate:更新前 — updated:更新后

 

beforeUpdate(更新前)： beforUpdate是指view层数据变化前，不是data中的数据改变前触发，因为Vue是数据驱动的。

 

updated(更新后)： view层的数据更新后，data中的数据同beforeUpdate，都是更新完以后的。

 

beforeDestrioy:销毁前 — destroyed:销毁后

 

beforeDestrioy(销毁前)： 实例销毁之前调用，在这一步，实例依然完全可用。

 

destroyed(销毁后)： 执行destroyed方法后，对data的改变不会再触发周期函数，此时的vue实例已经解除了事件监听以及dom的绑定，但是dom结构依然存在。

 

父子组件初始化： 父beforeCreate—>子beforeCreated—>子created—>父created

 

父子组件更新：父beforeUpdate—>子beforeUpdate—>子updated—>父updated

 

 

Vue3生命周期

 

 

setup() : 开始创建组件之前，在beforeCreate和created之前执行，创建的是data和method。

 

onBeforeMount() : 组件挂载到节点上之前执行的函数。

 

onMounted(): 组件挂载完成之后执行的函数。

 

onBeforeUpdate(): 组件更新之前执行的函数。

 

onUpdated()：组件更新完成之后执行的函数。

 

omBeforeUnmount()： 组件卸载之前执行的函数。

 

onUnmounted()： 组件卸载完成之后执行的函数。