vue3之在setup函数里面使用生命周期(也是函数,setup能使用的功能大多是函数,传个值即可)

最新推荐文章于 2024-07-15 07:46:03 发布

默默努力的小老弟

最新推荐文章于 2024-07-15 07:46:03 发布

阅读量1.3k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_47039303/article/details/121704097

版权

本文介绍了Vue3中与Vue2不同的生命周期钩子函数，重点讲解了onBeforeMount和onUpdated两个钩子。在Vue3中，生命周期钩子名前缀变为on，例如onBeforeMount对应Vue2的beforeMount。示例代码展示了如何在Vue3应用中使用这些新钩子进行操作，帮助开发者理解Vue3的更新和挂载过程。

摘要由CSDN通过智能技术生成

注意与vue2不同,vue3在vue2的生命周期的名字的基础上加了个on
如: vue2: beforeMount vue3:onBeforeMount

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">

			
			
			
		</div>
	</body>
	<script src="https://unpkg.com/vue@next"></script>
	<script>
		const app=Vue.createApp({
			setup(prop,context){
				
					const {onBeforeMount,onBeforeUpdate,onUpdated}=Vue;
					onBeforeMount(()=>{
						console.log("挂载前");
					});
					onUpdated(()=>{
						console.log("更新了");
					});
					return{
						
					}
				
				
				
			}
			
		});
	   app.mount("#app")
	
	</script>
</html>