Vue2和Vue3的生命周期

Vue2和Vue3的生命周期

Vue2		Vue3
beforeCreate(创建前) 不能通过this读取data数据和调用methods中的方法，可以执行了一些初始化的准备工作		setup():开始创建组件之前，在beforCreate和created之前执行创建的是data和method
created(创建后) 此时已经完成props,data,methods的创建，可以通过this读取data数据和调用methods中的方法		setup():开始创建组件之前，在beforCreate和created之前执行创建的是data和method
beforeMount(挂载前) 不能获取页面的Dom节点，已经挂载编译好的模板		onBeforeMount() 相当于 vue2.x 中 beforeMount
mounted(挂载后) 此时Dom渲染是在mounted完成之后，能通过ref读取到页面中内容，通常用来调用方法和获取异步数据		onMounted() 相当于 vue2.x 中 mounted
beforeUpdate(更新前) (在数据更新后,界面更新前调用): 读取的数据是最新的,但页面是老的		onBeforeUpdate() 相当于vue2.x中的beforeUpdate
updated(更新后) 读取的数据和页面都是新的		onUpdated() 相对于vue2.x中的updated
beforeDestroy(销毁前) 此处是准备在销毁之前调用的钩子，数据props，data,methods都可以访问，但是DOM已经被移除了 ， 做一些收尾的工作,比如: 清除定时器/解绑监听/…		onBeforeUnmounted() 相对于vue2.x中的beforeDestroy
destroyed(销毁后）		onUnmounted() 相对于vue2.x中的destroyed
Vue2官网		Vue3官网
keep-alive 作用缓存组件，优化项目性能
activated		被 keep-alive 缓存的组件激活时调用 (包括首次渲染激活)，没有缓存不会调用
deactivated		被 keep-alive 缓存的组件停用时调用，没有缓存不会调用

当然还有一些不太常用的如：errorCaptured：捕获一个来自子孙组件的错误时被调用 等等

父子组件的生命周期

初始化:

beforeCreate
created
beforeMount
–child beforeCreate
–child created
–child beforeMount
–child mounted
mounted

更新

beforeUpdate
–child beforeUpdate
–child updated

updated

死亡

beforeDestroy

–child beforeDestroy

–child destroyed

destroyed