前端的成长-学习Vue3-生命周期【第五弹】

官方网址： 生命周期

一. 生命周期（组合api）

1. setup：这是Vue3中新增的生命周期，用于替代Vue2中的beforeCreate和created生命周期，用于配置组件，包括响应式数据、计算属性、方法等。
2. beforeMount：组件即将挂载到页面的生命周期，用于处理异步操作。
3. onMounted：组件挂载完成的生命周期，用于处理DOM操作和数据初始化。
4. onUpdated：组件更新完成的生命周期，用于处理组件更新后的DOM操作和数据初始化。
5. beforeUnmount：组件即将卸载的生命周期，用于清理资源和取消异步操作。
6. onUnmounted：组件卸载完成的生命周期，用于清理资源和取消异步操作。

二. 对比vue中不一样的生命周期

注意： 在vue3中可以使用vue2中的生命周期回调函数，只不过vue2中的生命周期使用方法是Options（配置选项），在vue3当中使用的是组合Api。

1. onBeforeMount

（1）用法

setup(){
	onBeforeMount(() =>{
		console.log(3.0x中的onBeforeMount)
	})
},

2. onMounted

（1）用法

setup(){
	onBeforeMount(() =>{
		console.log(3.0x中的onBeforeMount)
	})
}

3. onBeforeUpdated

（1）用法

setup(){
	onBeforeMount(() =>{
		console.log(3.0x中的onBeforeUpdated)
	})
}

4. onUpdated

（1）用法

setup(){
	onBeforeMount(() =>{
		console.log(3.0x中的onUpdated)
	})
}

5. onBeforeUnmount

（1）用法

setup(){
	onBeforeMount(() =>{
		console.log(3.0x中的onBeforeUnmount)
	})
}

6. onUnmounted

（1）用法

setup(){
	onBeforeMount(() =>{
		console.log(3.0x中的onUnmounted)
	})
}

注意：使用vue3中的生命周期api比vue2中的生命周期执行快

The end…

如果您认真阅读至此，您现在已经掌握了基本的知识啦 ，为接下来我们学习Vue3更加有信心！！。
如果喜欢这个帖子，请不要忘记点赞，留言，评论。我们一起在前端小白中进步